Rails 4 turbo-link 阻止 jQuery 脚本工作 [英] Rails 4 turbo-link prevents jQuery scripts from working

问题描述

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

I'm building a Rails 4 app and I have a few scattered js files that I'm trying to include "the rails way". I moved jquery plugins into the /vendor/assets/javascripts and I updated the manifest (application.js) to require them. When I load the pages locally I see that they appear correctly.

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

However, I'm getting inconsistent behavior from one of the scripts that's compiled. I have a controller-specific js file called projects.js which is referenced in the application.js via the use of require_tree .:

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

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

I see the file is included correctly, and it works... half the time. The other half of the time, the stuff in projects.js doesn't seem to do anything (it's mostly jquery animations and some ajax requests). When it doesn't work, I'll click buttons a couple times, nothing will happen, and then I'll throw this error:

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

当脚本位于单个视图中时(错误的方式)，这从未发生过，所以我相当确定问题不在于我的 javascript 代码.另一个可能相关的细节是，projects.js 中的内容被包裹在 $(document).ready(function(){. 另外，我正在开发模式下进行测试，因此 javascripts 和 css未由资产管道合并.

This never happened when the scripts were in the individual views (the wrong way), so I'm fairly certain the problem is not with my javascript code. One other potentially relevant details is that the stuff in projects.js is wrapped in a $(document).ready(function(){. Also, I'm testing in development mode so the javascripts and css are not combined by the asset pipeline.

知道这里发生了什么吗?我是 Rails 新手，但我已尽力遵守所有约定.

Any idea what's going on here? I'm new to Rails but I've done my best to follow all the conventions.

更新！

当我的项目脚本不起作用时，这是可以预测的.每次加载第一页都有效.然后我单击一个指向使用我的 project.js 行为的新页面的链接，第二个 页面从不工作.我点击了几次，最终抛出了上面的错误.我仍然不确定为什么，但我怀疑这与 turbo-linking 有关.

It's predictable when my project scripts don't work. The first page load works every time. Then I click one link to a new page which uses my project.js behaviors and the second page never works. I click a few times and eventually throw the error above. I'm still not sure why, but I'm suspecting this is related to turbo-linking.

推荐答案

$(document).ready(function(){ 不适用于 Turbolinks.Turbolinks:

$(document).ready(function(){ doesn't really work with Turbolinks. Turbolinks:

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

... makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.

所以页面只加载一次，然后根据需要替换部分.由于页面仅加载一次，您的 $(document).ready() 回调仅在最初访问站点时触发，因此在切换页面时您不会获得更多文档就绪事件，因为 Turbolinks实际上不会切换页面.来自精美手册:

So the page is only loaded once and then pieces are replaced as needed. Since the page is only loaded once, your $(document).ready() callbacks are only triggered when the site is initially visited, you won't get more document-ready events when switching pages because Turbolinks doesn't actually switch pages. From the fine manual:

使用 Turbolinks 页面将无需完全重新加载即可更改，因此您不能依赖 DOMContentLoaded 或 jQuery.ready() 来触发您的代码.相反，Turbolinks 在文档上触发事件，以提供进入页面生命周期的钩子.

With Turbolinks pages will change without a full reload, so you can't rely on DOMContentLoaded or jQuery.ready() to trigger your code. Instead Turbolinks fires events on document to provide hooks into the lifecycle of the page.

您可能想要监听 Turbolinks 事件之一:

You probably want to listen for one of the Turbolinks events instead:

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

• page:change the page has been parsed and changed to the new version and on DOMContentLoaded
• [...]
• page:load is fired at the end of the loading process.

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

page:change is usually what you're looking for as it is triggered when loading a fresh page and restoring a page from the Turbolinks page cache.

您可能想要关闭 Turbolinks，直到您有时间查看所有的 JavaScript 并完成完整的 QA 扫描.您还应该测试您网站的速度，看看它是否值得使用.

You might want to turn off Turbolinks until you've had time to review all of your JavaScript and you've done a full QA sweep. You should also test your site's speed to see if it is worth using at all.

另一种选择是使用 jquery.turbolinks 为您修补内容.我没有用过这个，但其他人正在使用它，效果很好.

Another option would be to use jquery.turbolinks to patch up things for you. I haven't used this but other people are using it to good effect.

这篇关于Rails 4 turbo-link 阻止 jQuery 脚本工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！