Rails 4 turbo-link阻止jQuery脚本工作

Question

我正在构建一个Rails 4应用程序，我有一些分散的js文件，我试图包括“rails方式”。 我将jquery插件移动到/ vendor / assets / javascripts中，并更新了清单（application.js）以要求它们。 当我在本地加载页面时，我看到它们正确显示。

但是，我从其中一个已编译的脚本中获得了不一致的行为。 我有一个名为projects.js的特定于控制器的js文件，它通过使用require_tree .在application.js中引用require_tree . ：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
//= require jquery.form.min
//= require_tree .

我看到文件被正确包含，并且它的工作时间有一半。 另一半时间，projects.js中的东西似乎没有做任何事情（它主要是jquery动画和一些ajax请求）。 当它不起作用时，我会点击按钮几次，什么都不会发生，然后我会抛出这个错误：

Uncaught TypeError: Cannot read property 'position' of null 
turbolinks.js?body=1:75

当脚本处于各个视图（错误的方式）时，这种情况从未发生过，所以我很确定问题不在于我的javascript代码。 另一个可能相关的细节是，projects.js中的东西被包装在$(document).ready(function(){ 。另外，我正在开发模式下测试，所以javascripts和css没有被资产管道组合。

知道这里发生了什么吗？ 我是Rails的新手，但我已尽力遵守所有惯例。

更新！

当我的项目脚本不起作用时，它是可预测的。 第一页加载每次都有效。 然后我点击一个链接到一个使用我的project.js行为的新页面， 第二个页面永远不会工作。 我点击几次，最终抛出上面的错误。 我仍然不确定为什么，但我怀疑这与涡轮连接有关。

Answer 1

$(document).ready(function(){对Turbolinks不起作用.Turbolinks ：

...更快地在您的Web应用程序中生成以下链接。 它不是让浏览器在每个页面更改之间重新编译JavaScript和CSS，而是使当前页面实例保持活动状态，并仅替换头部中的正文和标题。

因此页面只加载一次，然后根据需要更换部分。 由于页面只加载一次，因此只有在最初访问站点时才会触发$(document).ready()回调，切换页面时不会获得更多文档就绪事件，因为Turbolinks实际上并不切换页面。 从精细手册 ：

使用Turbolinks页面将在没有完全重新加载的情况下更改，因此您不能依赖DOMContentLoaded或jQuery.ready()来触发代码。 相反，Turbolinks会在文档上触发事件，以便为页面的生命周期提供挂钩。

您可能想要收听Turbolinks事件之一：

• page:change页面已被解析并更改为新版本和DOMContentLoaded
• [...]
• page:load在加载过程结束时触发load。

page:change通常是您正在寻找的内容，因为它在加载新页面并从Turbolinks页面缓存中恢复页面时被触发。

您可能希望关闭Turbolinks，直到您有时间查看所有 JavaScript并且您已完成全面的QA扫描。 您还应该测试您网站的速度，看看它是否值得使用。

另一个选择是使用jquery.turbolinks为你修补东西。 我没有用过这个，但是其他人正在使用它以达到良好的效果。

Answer 2

此railscast已经提供了解决方案

这是一个例子（我喜欢使用的那个）。

ready = ->
  # ..... your js

$(document).ready(ready)
$(document).on('page:load', ready)

还有一个宝石可以解决这个问题，让你以旧的方式继续这样做。 它工作得很好:)

Answer 3

我意识到这个答案是REAAAAAAAALLLLLLLYYYYY晚了...但我想我会添加它。

我上周刚刚遇到这个问题..试图让基金会工作..

首先我补充说：

gem 'jquery-turbolinks'

然后将它放在application.js如下所示：

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

然后我在它下面添加了这个：

$(document).on('turbolinks:load', function() {

});

一切都对我有用。 希望这可以帮助！