Rails 5：如何使用带有turbo-links的$（document）.ready（）

Question

除了初始加载之外，

Turbolinks会阻止正常的$(document).ready()事件在所有网页访问中触发，如here和here所述。但是，链接答案中的所有解决方案都不适用于Rails 5。如何像以前的版本一样在每次访问页面上运行代码？

Answer 1

您不需要收听ready事件，而是需要参与Turbolinks针对每次访问页面而触发的事件。

不幸的是，Turbolinks 5（这是Rails 5中出现的版本）已被重写，并且不使用与之前版本的Turbolinks相同的事件名称，导致提到的答案失败。现在有效的是收听turbolinks:load事件，如下所示：

$( document ).on('turbolinks:load', function() {
  console.log("It works on each visit!")
})

Answer 2

Native JS：

document.addEventListener("turbolinks:load", function() {
    console.log('It works on each visit!');
});

Answer 3

这是我的解决方案，覆盖jQuery.fn.ready，然后$(document).ready无需任何更改即可运行：

jQuery.fn.ready = (fn)->
  $(this).on 'turbolinks:load', fn

Answer 4

在Rails 5中，最简单的解决方案是使用：

var LoginPage = require('${appDir}/src/test/js/cv/pages/LoginPage');

代替$(document).on('ready turbolinks:load', function() {}); 。奇迹般有效。

Answer 5

以下是适用于我的解决方案，来自here：

1. 安装gem 'jquery-turbolinks'

2. 将此.coffee文件添加到您的应用中：https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. 将其命名为turbolinks-compatibility.coffee

4. 在application.js

   //= require jquery
   //= require jquery_ujs
   //= require jquery.turbolinks
   //= require turbolinks
   //= require turbolinks-compatibility
   

Answer 6

While we await the fix to this really cool gem, I was able to move forward by modifying the following;

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbo:ready', -> callback($)

to:

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbolinks:load', -> callback($)

I'm not yet aware what this does not resolve, but it seemed to work well on initial inspection.

Answer 7

纯现代js：

const onLoad = () => {
  alert("works")
}

document.addEventListener("load", onLoad)
document.addEventListener("turbolinks:load", onLoad)

Answer 8

使用轻量级宝石jquery-turbolinks。

使$(document).ready()无需更改现有代码即可使用Turbolinks。

或者，您可以将$(document).ready()更改为以下之一：

$(document).on('page:fetch', function() { /* your code here */ });

$(document).on('page:change', function() { /* your code here */ });

取决于哪种情况更适合您的情况。

Answer 9

（对于coffeescript）

我使用：  $(document).on 'turbolinks:load', ->

而不是：  $(document).on('turbolinks:load', function() {...})