Rails 4:如何使用带有turbo-links的$(document).ready()

Question

我试图组织JS文件"rails way"时,在我的Rails 4应用程序中遇到了一个问题.他们以前分散在不同的观点中.我将它们组织成单独的文件,并使用资产管道进行编译.但是,我刚刚了解到,当打开turbo-linked时,jQuery的"就绪"事件不会触发后续点击.第一次加载页面时它可以工作.但是当你点击链接时,内部的任何内容ready( function($) {都不会被执行(因为页面实际上并没有再次加载).好解释:这里.

所以我的问题是:在启用turbo-links时,确保jQuery事件正常工作的正确方法是什么？您是否将脚本包装在特定于Rails的侦听器中？或者也许rails有一些魔力让它变得不必要？文档对于它应该如何工作有点模糊,特别是关于通过像application.js这样的清单加载多个文件.

Answer 1

这就是我做的...... 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...

});

Answer 2

我刚学会了解决这个问题的另一种选择.如果加载的jquery-turbolinks宝石它将绑定Rails的Turbolinks事件的document.ready事件,这样你就可以用通常的方式写你的jQuery.你只需要添加jquery.turbolinks之后jquery在js清单文件(默认:application.js).

Answer 3

最近我找到了最简洁易懂的处理方式:

$(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事件上.

Answer 4

在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

Answer 5

根据新的导轨指南,正确的方法是执行以下操作:

$(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.

Answer 6

注意:请参阅@ SDP的答案,了解干净的内置解决方案

我把它固定如下:

通过更改include顺序,确保在包含其他应用程序相关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');
});

Answer 7

以上都不适用于我,我通过不使用jQuery的$(document).ready来解决这个问题,但是使用addEventListener.

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

Answer 8

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

Answer 9

您必须使用：

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

来自turbolinks doc。