小编Sav*_*ava的帖子

什么是更好的解决方案初始化浏览器后退按钮上的jquery插件,这不仅仅是转换元素在Rails 5中使用turbolinks,如masterslider(照片库)或光滑(轮播),而不是像我下面那样重新加载页面？

document.addEventListener 'turbolinks:load', ->
  slickElementsPresent = $('.event-card').find('div.slick-slide')[0]
  if slickElementsPresent?
    window.location.reload();
  else
    $('.event-card').each ->
      $(@).not('.slick-initialized').slick {
        infinite: false,
        nextArrow: $(@).find('.event-more-details-button'),
        prevArrow: $(@).find('.event-card-slide-back-button')
      }

为了清楚起见,我检查看看'turbolinks:load'是否有任何html元素只有在插件初始化时才会出现,如果是,那么刷新页面,因为即使元素在那里,插件也是没有初始化.然后我在所有具有我想要它的类的元素上初始化插件.

有人在这里遇到这个问题:https://github.com/turbolinks/turbolinks/issues/106有人指出

我只是想为那些有类似问题的人添加使得初始化函数幂等在某些情况下不一定是解决方案.使用dataTables完成后,我可以避免重复元素.但是,与插件相关的页面上元素的缓存版本不再在浏览器上单击,因为看起来插件未在缓存页面中初始化.

重新加载页面,如果插件已经更改了DOM,因为当有人按下后退按钮时从缓存中检索它似乎非常糟糕,但它是我提出的最好的,所以我转向世界寻求更多的想法!

更新:

所以一些jquery插件有很好的'撤消'/'破坏'方法,如果是这样的话,最好添加一个事件监听器"turbolinks:before-cache",然后像这样调用该方法:

document.addEventListener "turbolinks:before-cache", ->
  $('.event-card').each ->
    $(@).slick('unslick');

但是有些jquery插件没有破坏函数或破坏实现此功能的函数.就像masterslider有一个$('your-slider-element').masterslider('destroy')功能,但它不会"撤消"它应用于你的html的javascript魔法,就像完全摆脱它一样,所以当你从浏览器的后退或前进按钮返回页面时,滑块根本不存在,因为它被触发的html元素已被破坏.这意味着对于某些插件,我仍然拥有的最佳答案是当他们所在的页面通过浏览器后退和前进按钮导航到页面时完全重新加载页面.