13

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

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 插件有很好的 'undo'/'destroy' 方法，如果是这种情况，最好添加一个事件侦听器"turbolinks:before-cache"，然后像这样调用该方法：

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

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

4

1 回答 1

22

因此，对于涉及没有“撤消”的 jquery 插件的“恢复”访问（因为我已经了解到浏览器后退和前进按钮访问在 turbolinks 的世界中被称为），我想出的最佳答案方法是简单地选择页面退出缓存。我通过抛出实现了这一点：

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

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

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

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

于 2016-09-30T22:38:37.433 回答