不过这四套方案中，都把 turbolinks 拿掉了。我个人是很喜欢 turbolinks 的，所以怎么权衡看大家喜好。

btw gem 'vuejs-rails' 也建议把 turbolinks 禁用的

楼主翻译的这篇教程是 14 年的，那时候还习惯用 coffee 写 React

其实 jsx 挺好的，可以尝试 react-rails 这个 gem，是一个比较简单无脑的集成方法

#5 楼 @kouunn 楼上的意思是，你可以把你的初始化代码放到 application.js 中，把它放到一个 $(document).ready(function(){});的闭包里。

如果你用的是 Turbolinks 3，把

$(document).ready(function(){
  // 初始化你的canvas...
});
// 替换成
$(document).on('page:load', function(){
  // code...
});

如果是 Turbolinks 5

// 替换成
$(document).on('turbolinks:load', function(){
  // code...
});

1. 试试把 Turbolink 禁用掉
2. 下次别贴这么长的代码了

问题解决了，谢谢楼上各位给的建议

我的做法是统一在一个文件中（或者直接在 application.coffee 里面）绑定所有事件：

$(document).on
  'turbolinks:load': ->
    # 此处绑定全局事件
    App.init()

$(document).on
  'turbolinks:before-cache': ->
    # 此处解绑原先会出现多次的事件，比如dataTables
    $('[selector-dataTables]').dataTable().fnDestroy()

没有用 jquery.turbolinks ，目前感觉良好。

@qinfanpeng 感谢回复 但是应该是排除了 jquery.turbolinks 没生效的可能性，在加上它和去掉它还是有区别的。

@billy 感谢回复 ，正如你所说，所有绑定都是写法一，而且没有提供解绑的 API。我昨天看了好多社区管理员 side project 里面的做法，对“解绑事件”有了一些认识。

也就是说我要做类似：

$(document).off('click', '.theme-specific-class', function(){})
$(document).on('click', '.theme-specific-class', function(){...})

这样的事情吗？

看起来我是不是该换一个 theme 了…

#3 楼 @hemengzhi88 不应该是 Gitlab 么

#5 楼 @uniqueway 希望回国的时候你们还在招人

你可以用这个 Gem masonry-rails.

然后，如一楼所说，这是一个 turbolinks 导致的问题。

你需要用到ready page:load来使你的 js 代码被正确读取到，一个例子如下：

$(document).on 'ready page:load', ->
  $ ->
    $('#products').imagesLoaded ->
      $('#products').masonry
        itemSelector: '.box'
        isFitWidth: true

当然，你也可以用这个 Gem jquery.turbolinks 来解决你所遇到的“必须要刷新页面”才能正常读取到各类 jQuery 插件的问题。

特意登陆来回一帖，视频实在是太棒，很感动！ 作为一名热爱旅游的留学生，目前正在巴黎学习，也是一名 rails 工程师。 其实针对年轻人的境外自助游，留学生是一块很大的市场，这个旅游形式实在太赞，这种深入当地的旅游体验一定会让人终生难忘的！看好你们~