如何使用 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
上使用的应用程序
应该发生什么:无论是重定向、呈现还是仅单击应用中的新页面,任何 table 和 class sorttable
(我在原JS中编辑的)按列标题应该是sortable。
实际发生了什么:我在联系人页面上。我点击刷新,出现 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
禁用 Turbolinks per-page 或完全禁用 Turbolinks 对我们来说不是解决方案。如果文件不适用于 turbolinks,我愿意使用 gems;但是,gem 应该向应用程序添加少量代码。我们宁愿没有 classes 专门用于选择要排序的列。此外,某些列 to-be-sorted 不是来自 ActiveRecord(例如 1 个单元格中的 2 个属性)。
经过多次调试,我明白了为什么 turbolinks 不喜欢 sorttable.js
。 JS 文件包含触发器(一些基于浏览器类型)以在文档加载时启动排序表。此类事件侦听器与 turbolinks 不兼容。我为完成这项工作所做的工作如下。
将vendor/assets/javascripts/sorttable.js
移动到app/views/shared/js/_sorttable.html.haml
为新文件添加前缀 :javascript
(%script{languauge: "javascript"}
),并将所有后续行缩进 2 个空格
从 application.js
中删除排序表
在所有相关页面的顶部,添加以下代码块:
= render 'shared/js/sorttable'
%script
$(document).on("page:change", sorttable.init)
有关代码示例和进一步说明,请参阅 this gist。
- Rails 4.2.0,turbolinks (2.5.3)
- jquery-rails (4.0.3), jquery-ui-rails (5.0.3)
sorttable.js
- 在 Chrome、Firefox 和 IE 上使用的应用程序
应该发生什么:无论是重定向、呈现还是仅单击应用中的新页面,任何 table 和 class sorttable
(我在原JS中编辑的)按列标题应该是sortable。
实际发生了什么:我在联系人页面上。我点击刷新,出现 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
禁用 Turbolinks per-page 或完全禁用 Turbolinks 对我们来说不是解决方案。如果文件不适用于 turbolinks,我愿意使用 gems;但是,gem 应该向应用程序添加少量代码。我们宁愿没有 classes 专门用于选择要排序的列。此外,某些列 to-be-sorted 不是来自 ActiveRecord(例如 1 个单元格中的 2 个属性)。
经过多次调试,我明白了为什么 turbolinks 不喜欢 sorttable.js
。 JS 文件包含触发器(一些基于浏览器类型)以在文档加载时启动排序表。此类事件侦听器与 turbolinks 不兼容。我为完成这项工作所做的工作如下。
将
vendor/assets/javascripts/sorttable.js
移动到app/views/shared/js/_sorttable.html.haml
为新文件添加前缀
:javascript
(%script{languauge: "javascript"}
),并将所有后续行缩进 2 个空格从
application.js
中删除排序表
在所有相关页面的顶部,添加以下代码块:
= render 'shared/js/sorttable' %script $(document).on("page:change", sorttable.init)
有关代码示例和进一步说明,请参阅 this gist。