如何使用 turbolinks 在 Rails4 上启用`sorttable.js`

Question

• Rails 4.2.0，turbolinks (2.5.3)
• jquery-rails (4.0.3)、jquery-ui-rails (5.0.3)
• sorttable.js
• 在 Chrome、Firefox 和 IE 上使用的应用程序

应该发生什么：无论是重定向、渲染还是只是单击应用程序中的新页面，任何具有类 sorttable（我在原始 JS 中编辑）的表都应该是可排序的按列标题。

实际发生的情况：我在联系人页面上。我点击刷新，出现 JS 中的记录器语句。该插件按预期工作。如果我导航到主页，然后返回联系人，该文件仍列在页面源中，但没有出现记录器语句。该插件不起作用。

我们的application.js 是这样写的：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery_nested_form
//= require bootstrap
//= require sorttable
//= require_directory .
//= require autocomplete-rails
//= require turbolinks
//= require bootstrap-switch

禁用每页或完全禁用 Turbolink 对我们来说不是一个解决方案。如果文件不能与 turbolinks 一起使用，我愿意使用 gems；但是，gem 应该向应用程序添加少量代码。我们宁愿没有专门用于选择要排序的列的类。此外，某些要排序的列不是来自 ActiveRecord（例如 1 个单元格中的 2 个属性）。

Answer 1

经过多次调试，我弄清楚了为什么 turbolinks 不喜欢sorttable.js。 JS 文件包含触发器（一些基于浏览器类型）以在文档加载时启动排序表。此类事件侦听器与 turbolink 不兼容。我为完成这项工作所做的工作如下。

1. 将vendor/assets/javascripts/sorttable.js移动到app/views/shared/js/_sorttable.html.haml

2. 以:javascript (%script{languauge: "javascript"}) 为新文件添加前缀，并将以下所有行缩进 2 个空格

3. 从application.js中删除排序表

4. 在所有相关页面的顶部，添加以下代码块：

   = render 'shared/js/sorttable'
   %script
     $(document).on("page:change", sorttable.init)
   

代码示例和进一步解释请见this gist。