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

Question

什么是初始化 jquery 浏览器后退按钮上的插件的更好解决方案，这些插件在 Rails 5 中使用 turbolinks 时不仅仅是转换元素，例如 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 元素只有在插件已初始化时才会出现，如果是，则刷新页面，因为即使尽管元素在那里，但插件未初始化。然后我在所有具有 class 我想要的元素上初始化插件。

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

I just want to add for those having similar issues that making an initialization function idempotent is not necessarily the solution in some circumstances. Having done so with dataTables I am able to avoid duplicate elements. However, the cached versions of the elements on the page related to the plugin no longer function on a browser back click as it seems the plugin is not initialized in a cached page.

如果插件已经更改 DOM 则重新加载页面，因为当有人按下后退按钮时它正在从缓存中检索，这看起来很糟糕，但这是我想出的最好的，所以我向世界寻求更多创意！

更新：

所以一些 jquery 插件有很好的 'undo'/'destroy' 方法，如果是这种情况，最好在 "turbolinks:before-cache" 上添加一个事件侦听器，然后调用该方法像这样：

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

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

Answer 1

所以我想出的最佳答案是处理涉及 'Restoration' 的访问（因为我后来了解到浏览器后退和前进按钮访问在 turbolinks 的世界中被称为）涉及 jquery 没有 'undo' 方法的插件只是简单地选择页面退出缓存。我通过抛出实现了这个：

<% 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 从网络而不是缓存获取页面，这是 'restoration' 访问的正常行为。只需要非常仔细地阅读文档并弄清楚如何在 rails 中实现它，这还不错。

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

JQuery plugin initialization on browser back button for Turbolinks Rails 5

ruby-on-rails

turbolinks

ruby-on-rails-5

turbolinks-5