• 不过这四套方案中,都把 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 希望回国的时候你们还在招人 ☺

  • Masonry 插件的 at 2015年12月18日

    你可以用这个 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 工程师。 其实针对年轻人的境外自助游,留学生是一块很大的市场,这个旅游形式实在太赞,这种深入当地的旅游体验一定会让人终生难忘的!看好你们~