在 Rails 4 中使用 Foundation 和 Turbolinks 时遇到问题
Posted
技术标签:
【中文标题】在 Rails 4 中使用 Foundation 和 Turbolinks 时遇到问题【英文标题】：Trouble using Foundation and Turbolinks with Rails 4 【发布时间】：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 将起作用。我的顶栏也有类似的问题。 ***.com/questions/21293051/… 谢谢@AlexAube。您的帖子帮助我找到了解决方案。我只是在$(document).foundation(); 之后移动了//= require turbolinks 而没有安装jQuery Turbolink。
@AlexAube 所以 jquery.turbolinks 实际上替换了 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 需要位于文件的顶部，并且 turbolinksrequire 最终被忽略。虽然我个人同意删除 turbolinks 可能是正确的答案......像 @Murtza 建议的（挂钩到 turbolinks 页面加载以重新调用基础）将是一个更正确的答案在这里.以上是关于在 Rails 4 中使用 Foundation 和 Turbolinks 时遇到问题的主要内容，如果未能解决你的问题，请参考以下文章
另一个“Heroku Rails 4 中不显示 Foundation 图标”的帖子
用 Rails 3 和 Foundation 4 覆盖 a:visited 的正确方法是啥？
如何在我的 Rails 4 应用程序中配置 Compass 和 Zurb Foundation 5，以便它们都可以在同一个目录中访问？