Rails 4：如何在Turbo-Links中使用$（document）.ready（）

尝试以“ rails方式”组织JS文件时，我在Rails 4应用程序中遇到了一个问题。它们以前分散在不同的视图中。我将它们组织到单独的文件中，并通过资产管道进行编译。但是，我刚刚了解到，在打开涡轮链接时，jQuery的“就绪”事件不会在随后的点击中触发。第一次加载页面时，它可以工作。但是，当您单击链接时，其中的任何内容ready( function($) {都不会执行（因为该页面实际上不会再次加载）。好的解释：在这里。

所以我的问题是：什么是确保涡轮链接打开时jQuery事件正常工作的正确方法？您是否将脚本包装在特定于Rails的侦听器中？或者，也许rails有一些使它不必要的魔力？该文档对如何工作有点含糊不清，尤其是在通过清单（如application.js）加载多个文件方面。

这是我的工作... CoffeeScript：

ready = ->

  ...your coffeescript goes here...

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

最后一行监听页面加载，这是turbo链接将触发的页面加载。

编辑 ...添加Javascript版本（按请求）：

var ready;
ready = function() {

  ...your javascript goes here...

};

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

编辑2 ...对于Rails的5（Turbolinks 5）page:load成为turbolinks:load和将初始负载甚至被解雇。因此，我们可以执行以下操作：

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

  ...your javascript goes here...

});

我刚刚了解了解决此问题的另一种选择。如果加载的jquery-turbolinks宝石它将绑定Rails的Turbolinks事件的document.ready事件，这样你就可以用通常的方式写你的jQuery。您只需在js清单文件（默认为：）jquery.turbolinks之后添加即可。jqueryapplication.js

最近，我找到了最干净，最容易理解的处理方式：

$(document).on 'ready page:load', ->
  # Actions to do

要么

$(document).on('ready page:load', function () {
  // Actions to do
});

编辑
如果您将委派的事件绑定到document，请确保将其附加到ready函数，否则它们将在每个page:load事件上反弹（导致同一函数多次运行）。例如，如果您有这样的电话：

$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...

把他们从 ready函数，如下所示：

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

$(document).on 'click', '.button', ->
  ...

绑定到的委派事件document无需绑定到该ready事件。

在Rails 4文档中找到了这一点，类似于DemoZluk的解决方案，但略短：

$(document).on 'page:change', ->
  # Actions to do

要么

$(document).on('page:change', function () {
  // Actions to do
});

如果您有调用的外部脚本，$(document).ready()或者不愿意重写所有现有的JavaScript，则可以使用此gem继续使用$(document).ready()TurboLinks：https : //github.com/kossnocorp/jquery.turbolinks

按照新的rails指南，正确的方法是执行以下操作：

$(document).on('turbolinks:load', function() {
   console.log('(document).turbolinks:load')
});

或者，在coffeescript中：

$(document).on "turbolinks:load", ->
alert "page has loaded!"

不要听事件$(document).ready，只会触发一个事件。毫不奇怪，无需使用jquery.turbolinks gem。

这适用于4.2或更高版本的导轨，不仅适用于导轨5。

注意：有关干净的内置解决方案，请参见@SDP的答案

我将其修复如下：

通过更改包含顺序，确保在包含其他依赖于应用程序的js文件之前包含application.js：

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

定义一个全局函数来处理绑定 application.js

// application.js
window.onLoad = function(callback) {
  // binds ready event and turbolink page:load event
  $(document).ready(callback);
  $(document).on('page:load',callback);
};

现在，您可以绑定以下内容：

// in coffee script:
onLoad ->
  $('a.clickable').click => 
    alert('link clicked!');

// equivalent in javascript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('link clicked');
});

以上都不适合我，我通过不使用jQuery的$ {document）.ready来解决此问题，而是使用addEventListener来解决。

document.addEventListener("turbolinks:load", function() {
  // do something
});

$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'

您必须使用：

document.addEventListener("turbolinks:load", function() {
  // your code here
})

来自turbolinks doc。

要么使用

$(document).on "page:load", attachRatingHandler

或使用jQuery的.on函数达到相同的效果

$(document).on 'click', 'span.star', attachRatingHandler

有关更多详细信息，请参见此处：http : //srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

您可能不希望使用变量来保存“就绪”功能并将其绑定到事件，而是希望在触发ready时page:load触发事件。

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

这是我做的确保没有两次执行的操作：

$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});

我发现使用jquery-turbolinksgem或进行组合$(document).ready和/ $(document).on("page:load")或$(document).on("page:change")单独使用都会表现出异常情况-特别是在开发中。

我发现以下文章对我非常有用，并且详细介绍了以下内容的用法：

var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)

我想将这些留给那些升级到Turbolinks 5的人：修改代码的最简单方法是：

var ready;
ready = function() {
  // Your JS here
}
$(document).ready(ready);
$(document).on('page:load', ready)

至：

var ready;
ready = function() {
  // Your JS here
}
$(document).on('turbolinks:load', ready);

参考：https : //github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

$(document).ready(ready)  

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

经过这么多测试的解决方案终于来到了这一点。这么多您的代码绝对不会被调用两次。

      var has_loaded=false;
      var ready = function() {
        if(!has_loaded){
          has_loaded=true;
           
          // YOURJS here
        }
      }

      $(document).ready(ready);
      $(document).bind('page:change', ready);

我通常对Rails 4项目执行以下操作：

在 application.js

function onInit(callback){
    $(document).ready(callback);
    $(document).on('page:load', callback);
}

然后在其余的.js文件中，而不是使用$(function (){})I调用onInit(function(){})

首先，安装jquery-turbolinksgem。然后，别忘了将包含的Javascript文件从正文结尾application.html.erb移至<head>。

如此处所述，如果出于速度优化的原因将应用程序javascript链接放在页脚中，则需要将其移动到代码中，以便在代码内容之前加载。这个解决方案对我有用。

我发现在将函数用于时我的函数加倍ready，turbolinks:load所以我使用了

var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};

这样，如果支持turbolinks，您的功能就不会加倍！