如何使用turbolinks在Rails4上启用`sorttable.js` [英] How to enable `sorttable.js` on Rails4 with turbolinks

问题描述

• Rails 4.2.0，turbolinks（2.5.3）


• jquery-rails（4.0.3），jquery-ui-rails（5.0.3 ）


• sorttable.js


• Chrome，Firefox和IE上使用的应用

• Rails 4.2.0, turbolinks (2.5.3)
• jquery-rails (4.0.3), jquery-ui-rails (5.0.3)
• sorttable.js
• App used on Chrome, Firefox, and IE

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

WHAT SHOULD HAPPEN: Whether a redirect, render, or just clicking to a new page in the app, any table with class sorttable (I edited it in the original JS) should be sortable by column heading.

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

WHAT ACTUALLY HAPPENS: I am on a contacts page. I hit refresh, and logger statements in the JS appear. The plugin works as expected. If I navigate to Home, then back to Contacts, the file is still listed in the page source, but no logger statements appear. The plugin does not work.

我们的 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

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

Disabling Turbolinks per-page or altogether is not a solution for us. I am open to using gems if the file just does not work with turbolinks; however, the gem should add little code to the app. We'd rather not have classes dedicated to choosing which column to sort. Also, some columns to-be-sorted are not from ActiveRecord (like 2 attributes in 1 cell).

推荐答案

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

After much debugging, I figured out why turbolinks does not like sorttable.js. The JS file includes triggers (some based on browser type) to initiate sorttable on document load. Such event listener is incompatible with turbolinks. What I have done to make this work is the following.

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

使用前缀新文件：javascript （％script {languauge：javascript} ），并缩进所有后续行2个空格

Prefix the new file with :javascript (%script{languauge: "javascript"}), and indent all following lines 2 spaces

从 application.js中移除sorttable

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

At the top of all related pages, add the following code block:

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

有关代码示例和进一步说明，请参阅这个要点。

For code examples and further explanation, please see this gist.

这篇关于如何使用turbolinks在Rails4上启用`sorttable.js`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！