Question

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

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')
      }

要明确的是，我检查了一下＆＃39; turbolinks：load＆＃39;如果有任何html元素仅在插件初始化时才会出现，如果是，则刷新页面，因为即使元素存在，插件也不会被初始化。然后我在所有具有我想要它的类的元素上初始化插件。

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

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

如果插件已经更改了DOM，因为当有人按下后退按钮时从缓存中检索到该页面时，重新加载页面似乎非常糟糕，但它是我提出的最好的，所以I＆I ＃39;转向世界寻求更多创意！

更新：

因此，一些jquery插件可以很好地解决＆＃39; /＆＃39; destroy＆＃39;方法，如果是这样的话，最好在"turbolinks:before-cache"上添加一个事件监听器，然后像这样调用该方法：

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

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

Answer 1

因此，我提出了处理'恢复'访问的最佳答案（因为我已经学习了在turbolinks世界中调用浏览器后退和前进按钮访问），其中涉及没有jquery插件的'撤消'方法是简单地选择页面退出缓存。我通过抛出实现了这个：

<% if content_for?(:head) %>
  <%= yield(:head) %>
<% end %>

在我的application.html.erb文件的<head>部分，然后在页面顶部我不希望turbolinks包含在它的缓存中，我把：

<% content_for :head do %>
  <meta name="turbolinks-cache-control" content="no-cache">
<% end %>

这样，turbolinks从网络而不是缓存中获取页面，这是“恢复”访问的正常行为。只需要非常仔细地阅读文档，并弄清楚如何在rails中实现它并不是太糟糕。

Turbolinks Rails 5

1 个答案: