Инициализация плагина JQuery на кнопке возврата браузера для Turbolinks Rails 5

Что может быть лучше для инициализации плагинов jquery на кнопке возврата браузера, которые не просто преобразуют элементы при использовании турболинков в Rails 5, таких как 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 не имеют функций уничтожения или функций уничтожения, которые достигают этого. Как и у masterslider есть функция $('your-slider-element').masterslider('destroy'), но он не «отменяет» магию javascript, которую он применяет к вашему HTML, а просто полностью избавляется от него, и поэтому, когда вы возвращаетесь на страницу из браузера, кнопка назад или вперед, ползунок просто не существует, потому что элемент html, по которому он запускается, был уничтожен. Это означает, что для некоторых плагинов лучший ответ, который у меня еще есть, - это полностью перезагрузить страницу, когда страница, на которой они находятся, перемещается с помощью кнопок браузера назад и вперед.


ruby-on-rails ruby-on-rails-5 turbolinks turbolinks-5
person Sava    schedule 21.09.2016    source источник

Ответы (1)


arrow_upward
22
arrow_downward

Итак, лучший ответ, который я придумал для работы с посещениями "восстановления" (как я с тех пор узнал, посещения браузера назад и вперед кнопки вызова в мире турболинков), которые включают плагины jquery, которые не имеют "отмены" Метод состоит в том, чтобы просто отключить страницу от кеширования. Я реализовал это, бросив:

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

в разделе <head> моего файла application.html.erb, а затем вверху страницы я не хочу, чтобы турболинки включались в его кеш, я помещаю:

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

Таким образом, turbolinks извлекает страницу из сети, а не из кеша, что было бы нормальным поведением для посещения «восстановления». Просто нужно было очень внимательно прочитать документацию и выяснить, как реализовать это в рельсах, что было неплохо.

person Sava    schedule 30.09.2016
comment
Это надежная альтернатива, о которой я не думал, вместо того, чтобы прикреплять обратные вызовы turbolinks для уничтожения / повторной инициализации таких вещей, как таблицы данных. Спасибо. - person Greg Blass; 16.02.2017
comment
В Turbolinks 5 работает? Я не могу заставить его работать - person Juanse Cora; 28.02.2019
comment
да. На самом деле я понятия не имею, работает ли это с предыдущими версиями турболыков. Я рекомендую очень внимательно прочитать документацию, так как именно так я обнаружил этот ответ: github.com/turbolinks/turbolinks - person Sava; 01.03.2019