在 Rails 4 中使用 Foundation 和 Turbolinks 时遇到问题答案

【问题标题】：Trouble using Foundation and Turbolinks with Rails 4在 Rails 4 中使用 Foundation 和 Turbolinks 时遇到问题
【发布时间】：2014-09-28 19:55:10
【问题描述】：

我有一个带有 2 个按钮的标题：登录和注册 Like this。当我单击其中一个时，会出现一个窗口：window open。为此，我使用了基础的“Reveal Modal”（Reveal Modal）。

我的问题：如果我单击打开我网站的新页面的链接并尝试打开/关闭登录或注册弹出窗口，窗口将关闭，但这次阴影仍然存在 (like this)，我需要再次按 F5 即可。

我使用 Rails 4 和 Foundation 5。

文件_header.html.erb（查看部分）

<div class="large-12 columns header">
  <div class="logo">
    logo
  </div>
  <div class="infos">
      <ul>
        <li><a href="#" class="" data-reveal-id="login">Login</a></li>
        <li><a href="#" class="" data-reveal-id="signup">Sign up</a></li>
      </ul>
  </div>
</div>

<div id="login" class="reveal-modal" data-reveal>
  <p>
    Page Test 
  </p>
</div>

<div id="signup" class="reveal-modal roundish" data-reveal>
  <p>
    Page Test 
  </p>
</div>

文件 application.js

//= require jquery
//= require turbolinks
//= require foundation
//= require bxslider/jquery.bxslider.min.js
//= require home
//= require_tree .

$(function() {
  $(document).foundation();
});

感谢您的帮助。

【问题讨论】：

Turbolinks 不能很好地与基础文件一起使用。我的解决方案是使用 jquery.turbolinks 而不是 turbolinks。如果这确实是您的问题，那么完全删除 turbolink 将起作用。我的顶栏也有类似的问题。 stackoverflow.com/questions/21293051/…
谢谢@AlexAube。您的帖子帮助我找到了解决方案。我只是在$(document).foundation(); 之后移动了//= require turbolinks 而没有安装jQuery Turbolink。
@AlexAube 所以 jquery.turbolinks 实际上替换了 turbolinks？

标签： javascript jquery ruby-on-rails zurb-foundation turbolinks

【解决方案1】：

这适用于 turbolinks 进度条和基础选项卡、手风琴

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

var ready;
ready = function() {
  $(document).foundation();
};
$(document).ready(ready);
$(document).on('page:load', ready);

【讨论】：

另外需要注意的是，这段代码需要放在<body>内

【解决方案2】：

问题是 Turbolinks。

解决办法：把//= require turbolinks放在最后

//= require jquery
//= require bxslider/jquery.bxslider.min.js
//= require foundation
//= require home
//= require_tree .

$(document).foundation();

//= require turbolinks

感谢@AlexAube 的帮助！ :)

【讨论】：

此修复具有误导性。它工作，通过有效地禁用 turbolinks，因为 sprocket 需要位于文件的顶部，并且 turbolinks require 最终被忽略。虽然我个人同意删除 turbolinks 可能是正确的答案......像 @Murtza 建议的（挂钩到 turbolinks 页面加载以重新调用基础）将是一个更正确的答案在这里.