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

问题描述

我正在构建一个Rails 4应用程序，我有一些分散的js文件，我试图包含rails way。我将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.

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

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。 T urbolinks ：

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

...更快地在您的网络应用程序中生成以下链接。它不是让浏览器在每次页面更改之间重新编译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.

页面：更改通常是您在寻找新的页面并从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屋！