5

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

因此，导航到新页面可能不会触发.ready，尽管它总是会触发.page:load，因此新的 jQuery 代码不会初始化。

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

是否可以向我的 application.js 添加一个 javascript 代码来覆盖.ready要包含page:load的事件？我该怎么做？

4

5 回答 5

4

$(document).ready与其等待为您的 jQuery 触发，不如使用page:load：

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

或者，您可以设置 jquery.turbolinks gem：https ://github.com/kossnocorp/jquery.turbolinks

于 2013-09-27T05:22:22.820 回答
4

在 turbolinks 5.0.0 中，事件更改为turbolinks:load. 查看turbolinks 事件的完整列表。

该文档推荐以下代码：

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

位于https://github.com/dalpo/jquery.turbolinks的 jquery.turbolinks 分支已经反映了这些变化，并允许无缝插入 turbolinks。不过，我会争取turbolinks:load完全控制该事件，而不需要另一个库。

于 2016-08-01T01:00:14.987 回答
2

我不得不使用这个page:change事件：

js：

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

咖啡脚本：

$(document).on 'page:change' ->
    <code here>
于 2014-08-07T21:32:05.887 回答
1

使用 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
于 2017-05-22T20:48:43.163 回答
0

TLDR；以下是传统方法的工作原理

$(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 的文章

于 2021-12-12T20:11:30.713 回答