使用Turbolinks使jQuery正常工作

Question

我有一个 Rails 4 应用程序，使用了 Turbolinks。我理解的是 Turbolinks 会破坏 jQuery 代码，因为 Turbolinks 不会加载新页面，而只会获取新元素。

因此，访问新页面可能不会触发 .ready，尽管它总是会触发 .page:load，这样新的 jQuery 代码就无法初始化。

由于我有很多 jQuery 代码，所以我不想修改我的 jQuery 代码以与 Turbolinks 兼容。

是否可以将一个 JavaScript 代码添加到我的 application.js 文件中，以覆盖 .ready 事件并包括 page:load？我应该如何做到这一点？

- AdamNYC

Answer 1

不要等待$(document).ready触发jQuery，而是使用page:load代替：

$(document).on 'page:load' ->
  <your code>

另外，您可以安装jquery.turbolinks gem：https://github.com/kossnocorp/jquery.turbolinks

- Tyler

Answer 2

使用 turbolinks 5.0.0 后，事件已更改为 turbolinks:load。请参见 turbolinks 事件的完整列表。

文档建议使用以下代码：

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

位于https://github.com/dalpo/jquery.turbolinks的jquery.turbolinks分支已经反映了这些更改，并允许无缝地使用turbolinks。尽管如此，我会选择turbolinks:load事件来获得完全控制，而不需要另一个库。

- koppor

Answer 3

i had to use the page:change event:

js:

$(document).on('page:change', function () {
    <code here>
});

CoffeeScript：

$(document).on 'page:change' ->
    <code here>

- wasd-wasd

Answer 4

使用TurboLinks 5 / Rails 5 ... 我建议这样实例化DataTables。

这将防止在使用后退按钮时多次显示标题和页脚分页。

$(document).on 'turbolinks:load', ->
  tableElementIds = [
    '### TABLE ID HERE ###'
  ]
  i = 0
  while i < tableElementIds.length
    tableElementId = tableElementIds[i]
    if $.isEmptyObject($.find(tableElementId))
      i++
      continue
    table = undefined
    if $.fn.DataTable.isDataTable(tableElementId)
      table = $(tableElementId).DataTable()
    else
      table = $(tableElementId).DataTable(### OPTIONS HERE ###)

    document.addEventListener 'turbolinks:before-cache', ->
      table.destroy()
      return

    i++

  return

- aldefouw

---

$(document).on('turbolinks:load', function () { worked for me, Rails 5. - Major Major

Answer 5

简而言之; 这是传统方法的工作原理

$(document).ready(function() {
    $("#tbl-account").tableSorter();
});

它使用jQuery在文档完成加载后初始化表格排序插件。这里值得注意的一点是，当页面组件通过Turbolink切换时，没有拆卸和重新运行此js。没有必要在过去进行清理，因为浏览器会处理它。然而，在像Turbolinks这样的单页应用程序中，浏览器不会处理它。您作为开发人员必须管理JavaScript行为的初始化和清理。

当人们尝试将传统Web应用程序移植到Turbolinks时，他们经常遇到问题，因为他们的JS从不清理自己。

所有适用于Turbolinks的JavaScript都需要：

1. 在显示页面时初始化自身
2. 在Turbolinks导航到新页面之前清理自身。

捕获事件

Turbolinks提供了自己的事件，您可以捕获这些事件来设置和拆除JavaScript。让我们从拆除开始： ```js document.addEventListener('turbolinks:before-render', () => { Components.unloadAll(); }); ``` `turbolinks:before-render`事件在每个页面视图之前触发，除了第一个页面视图。这很完美，因为在第一个页面视图上没有什么可以拆除的。

初始化事件有些复杂。我们希望我们的事件处理程序在以下情况下运行：

1. 在初始页面加载时
2. 在访问新页面时的任何后续访问中 以下是如何捕获这些事件：

// Called once after the initial page has loaded
document.addEventListener(
  'turbolinks:load',
  () => Components.loadAll(),
  {
    once: true,
  },
);

// Called after every non-initial page load
document.addEventListener('turbolinks:render', () =>
    Components.loadAll(),
);

感谢Starr Horne撰写从jquery/pjax迁移到turbolinks的文章

- Kiran Maniya