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

Turbolink可以防止正常$(document).ready()事件在除初始加载之外的所有页面访问中触发，如此处和此处所述。但是，链接答案中的解决方案都无法与Rails 5一起使用。我如何像以前的版本那样在每次页面访问中运行代码？

ready无需监听事件，而是需要挂接到Turbolinks在每次页面访问时触发的事件。

不幸的是，Turbolinks 5（Rails 5中出现的版本）已被重写，并且没有使用与以前版本的Turbolinks相同的事件名称，从而导致上述答案失败。现在有效的方法是像这样监听turbolinks：load事件：

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

本机JS：

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

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

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

代替$(document).ready。奇迹般有效。

这是我的解决方案，重写jQuery.fn.ready，然后$(document).ready无需更改即可工作：

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

（对于咖啡脚本）

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

代替： $(document).on('turbolinks:load', function() {...})

这是对我有用的解决方案，从这里开始：

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
   

当我们等待修复这个非常酷的宝石时，我能够通过修改以下内容继续前进：

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

至：

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

我尚不清楚这不能解决什么问题，但在初步检查中似乎效果很好。

使用轻量级的gem jquery-turbolinks。

它可以$(document).ready()在不更改现有代码的情况下使用Turbolinks。

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

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

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

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