Rails 5：如何将 $(document).ready() 与 turbo-links 一起使用

Posted 2023-02-15

【中文标题】Rails 5：如何将 $(document).ready() 与 turbo-links 一起使用

【英文标题】：Rails 5: how to use $(document).ready() with turbo-links

【发布时间】：2016-07-06 18:23:52

【问题描述】：

Turbolinks 阻止正常的$(document).ready() 事件在除了初始加载之外的所有页面访问中触发，如here 和here 所讨论的。但是，链接答案中的解决方案均不适用于 Rails 5。如何像以前的版本一样在每次访问页面时运行代码？

【参考方案1】：

您需要挂钩到 Turbolinks 为每次页面访问触发的事件，而不是监听 ready 事件。

不幸的是，Turbolinks 5（即出现在 Rails 5 中的版本）已被重新编写，并且没有使用与以前版本的 Turbolinks 相同的事件名称，导致上述答案失败。现在起作用的是像这样收听turbolinks:load 事件：

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

【讨论】：

是的。这里也解释了。 guides.rubyonrails.org/…。检查 5.2 页面更改事件。

turbolinks:load 在本地为我触发，但在 Heroku 上没有。我在编译的 js 资产中看到了我的自定义 javascript 代码，但事件没有触发。

尽管 Rail 文档说什么，我使用的是 on('ready turbolinks:load') 否则我在某些页面上会遇到一些问题

嗨 Cyril，我遇到了同样的问题，即需要在初始页面加载以及 turbolinks:load 时触发。我在 SO,***.com/questions/41421496/… 上问过一个关于这个的问题。你对为什么会这样有更多的了解吗？你在使用 jquery-turbolinks（我是）。唯一的好处是它确保你的代码是幂等的。

rails 6 有什么不同吗？

【参考方案2】：

原生 JS：

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

【讨论】：

turbo:load 用于 Turbo

【参考方案3】：

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

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

而不是$(document).ready。奇迹般有效。

【讨论】：

不要将ready添加到列表中，否则函数会被执行两次。正如github.com/turbolinks/turbolinks/#observing-navigation-events 所说，你应该这样做：javascript $(document).ready(function() $(document).on('turbolinks:load', function() ) )

@XiaohuiZhang 你确定这样行吗？？？？因为如果$(document).ready 被触发，那么至少在我自己的场景中，我不需要turbolinks:load

@XiaohuiZhang 如果您的脚本必须在有 turbolinks 的页面和没有的页面上工作，那么在没有 turbolinks 的页面上将无法工作，因为它需要 turbolinks:load 事件来执行代码

@escanxr 两者都可以，你可以试试。因为 Turbolinks 总是会在 Turbolinks 页面与否时触发“turbolinks:load”事件。

@XiaohuiZhang 我用 Turbolinks 5 试过，没用。如果页面上禁用了 turbolinks，则只会触发 ready 事件。如果有turbolinks，代码会被调用两次

【参考方案4】：

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

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

【讨论】：

这正是我所需要的。这也适用于依赖document 回调的外部库。为什么投反对票？只要在整个应用程序中使用 turbolinks，这应该是安全的，对吧？

【参考方案5】：

这是对我有用的解决方案，来自here：

安装gem 'jquery-turbolinks'

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

将其命名为 turbolinks-compatibility.coffee

在 application.js

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

【讨论】：

在production 环境中呢？你测试了吗？有人说它在development 模式下可以正常工作。

gem 已弃用

【参考方案6】：

（对于咖啡脚本）

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

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

【讨论】：

我已经做到了，但我仍然遇到这个问题，正如@inye 所说：github.com/mkhairi/materialize-sass/issues/130。使用 JS 或 Coffee 并没有什么不同，至少对我来说没有。

大家好，这个答案一般有什么问题？

我猜这是coffeescript而不是原生javascript？我给了它一个 +1，因为这正是我正在做的，它对我有用（在我的咖啡脚本文件中）

是的！它是用于咖啡脚本的 :)。我的错误是没有指定它

【参考方案7】：

纯现代js：

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


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

涡轮增压是turbo:load

【参考方案8】：

在我们等待修复这个非常酷的 gem 时，我能够通过修改以下内容继续前进；

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

到：

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

我还不知道这不能解决什么问题，但在初步检查时似乎效果很好。

【参考方案9】：

使用轻量级 gem jquery-turbolinks。

它使$(document).ready() 与 Turbolinks 一起工作，而无需更改现有代码。

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

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

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

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

【讨论】：

jquery-turbolinks 还不支持 Turbolinks 5 github.com/kossnocorp/jquery.turbolinks/issues/56

你是对的，@AndrewH！希望尽快添加支持。

jquery-turbolinks gem 已被弃用。