最近在做一个新项目,于是尝试更新了 Turbolinks 5,说实话,坑的数量和之前一样多,而且坑的位置还不同了(因为 API 重写了),再加上我一直对 Turbolinks 似懂非懂的,几度让我抓狂到怀疑人生。
我来描述一下我遇到的问题:
一些故事背景
Application.coffee 的内容如下
#= require jquery
#= require jquery_ujs
#= require jquery.turbolinks
#= require theme.min
#= require plugins/jquery.dataTables.min
#= require plugins/jquery.geocomplete
#= require cocoon
#= require data-tables
#= require maps
#= require turbolinks
#= 顺序应该是没问题的,我参考了ruby-china的源码和jQuery.turbolinks的文档
值得一提的是(可能是):theme.min.js 中已经打包进了 jQuery,我不确定在这里引用两次会不会有问题。
然后,比如说折叠菜单、dataTables 的初始化都是这样做的:
jQuery(function() {
App.init(); // App 来自于 theme.min.js
});
jQuery(function() {
BaseTableDatatables.init();
});
// 这些函数都是在各自的JS文件的结尾处
我遇到的问题是:
这些 JS 绑定的事件都只在页面读取的那一刻有用,当点击某个链接后 Turbolinks.visit()
或使用浏览器 Back / Forward Button 后,这些事件均不再运作。
尝试过和想到的解决方案:
javascript_include_tag
放到 body 标签结束之前,但是这个“土方法”似乎在 Turbolinks 5 行不通了,而且这也是官方不建议做的方法。$(document).on("turbolinks:load", function(){ ... })
上,但是很显然,有一些功能就被重复绑定了。$(document).on("turbolinks:before-cache", function(){ ... })
,参考这里,但是说实话我没有理解怎么“解绑”事件。说实话,JS 真的是一门怎么写都不爽的语言啊……但是现在的应用越来越依赖 JS 了,所以我还是想把这里面的门道弄清,希望各位前辈不吝赐教!