Turbolinks Rails 5 中浏览器后退按钮上的 JQuery 插件初始化

Question

Turbolinks Rails 5 中浏览器后退按钮上的 JQuery 插件初始化

ruby-on-railsruby-on-rails-5turbolinksturbolinks-5

13

当使用Rails 5中的turbolinks时，对于不仅仅是转换元素的jquery插件（例如masterslider（相册）或slick（轮播）），在浏览器返回按钮上初始化更好的解决方案是什么，而不是像下面一样重新加载页面？

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插件没有destroy函数或者其销毁函数无法实现此功能。例如，Masterslider有一个$('your-slider-element').masterslider('destroy')函数，但它并不能'撤消'它应用于你的HTML上的JavaScript魔法，只是完全摆脱它。因此，当你通过浏览器的后退或前进按钮返回页面时，滑块根本不存在了，因为它所触发的HTML元素已被销毁。这意味着对于一些插件，我仍然认为最好的答案是当它们所在的页面通过浏览器的后退和前进按钮导航到时，完全重新加载页面。

- Sava

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sava · Accepted Answer

所以，对于“恢复”访问（如我已经了解的，在turbolinks世界中被称为浏览器后退和前进按钮的访问），涉及没有“撤消”方法的jquery插件，我想到的最好的解决方案就是简单地将页面从缓存中排除。我通过添加以下代码来实现这一点：

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

在我的application.html.erb文件的<head>部分，然后在页面顶部，我不想让turbolinks包含在它的缓存中，我放置了：

在我的application.html.erb文件的<head>部分，然后在页面顶部，我不想让Turbolinks在其缓存中包含，我加入：

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

这样TurboLinks会从网络中获取页面，而不是从缓存中获取，这与“恢复”访问的正常行为不同。只需要仔细阅读文档并找出如何在Rails中实现它，这并不太难。