JQuery Сова-Карусель Сова-Точки класса вопроса - PullRequest
Новая
       17

JQuery Сова-Карусель Сова-Точки класса вопроса

0 голосов
/ 28 апреля 2019

У меня возникает проблема, когда я использую owl-carousel в своем проекте Rails. когда я возвращаюсь на кэшированную страницу моих браузеров, которая использует класс карусели, я получаю слишком много классов карусельной совы на своей странице, это мой

JS код 

function initScrollboxHobby() {
    var owl = $(".owl-carousel");
    owl.owlCarousel({
        // loop: true,
        items: 1,
        nav: true
    });
}

и выдайте HTML-код

enter image description here

Как это исправить?

Ответы [ 2 ]

0 голосов
/ 28 апреля 2019

За помощь Ариелюода в решении проблем и моих собственных попыток.

Я сейчас так закодировал. 

var owl = $(".owl-carousel");
var owl_navs = $('.owl-carousel .owl-nav');
var owl_dots = $('.owl-carousel .owl-dots');
var owl_cloned = $('.owl-carousel .owl-stage-outer .owl-stage .cloned');

if(owl.hasClass('owl-loaded'))
{
    owl_navs.remove();
    owl_dots.remove();
    owl_cloned.remove();
}
owl.owlCarousel({
    loop: true,
    items: 1,
    nav: true
});

Это утомительно, но хорошо сработало.

Теперь я понял причину.

Когда я возвращаюсь на кэшированную страницу, потому что я написал код javascript в своем файле ERB, таким образом, старый код HTML может измениться.

И тогда функция Turbolinks запустит код JS в этом ИЗМЕНЕННОМ новом HTML-коде, Turbolinks должен сделать это, потому что, когда я снова посещаю кэшированную страницу, она потеряет все привязки событий.

Так что все элементы карусели будут грязными.

0 голосов
/ 28 апреля 2019

Я полагаю, что вы используете турбоинки, и когда вы возвращаетесь, страница кэшируется ею, и при загрузке она перезапускает функцию инициализации карусели совы.

Проблема, в основном, заключается в том, что турболинки не воспроизводятсяхорошо с неидемпотентными функциями https://github.com/turbolinks/turbolinks#making-transformations-idempotent

Мне удалось обойти эту проблему с другими плагинами js, поэтому она должна работать для вас.

В принципе, идея заключается в следующем:

Сначала, когда пользователь впервые заходит на страницу, скопируйте содержимое элемента с классом .owl-carousel на себя в качестве атрибута данных 

carousel = $('.owl-carousel');
carousel.data('originalHtml', carousel.html();
carousel.owlCarousel(....)

Затем, когда пользователивозвращается, прежде чем инициализировать карусель, проверить, была ли она инициализирована и кэширована, в этом случае сначала замените содержимое на исходное и удалите классы 

carousel = $('.owl-carousel');
if (carousel.hasClass('owl-loaded')) {
  carousel.html(carousel.data('originalHTML')).removeClass('owl-theme owl-loaded owl-drag');
}
carousel.owlCarousel(....)

Вы можете смешать оба шага в один: 

$(function() {
  const carousel = $('.owl-carousel');
  if (carousel.hasClass('owl-loaded')) { //if it has the class then it means it's the cached view
    carousel.html(carousel.data('originalHTML')).removeClass('owl-theme owl-loaded owl-drag');
  } else { // else it's a fresh load of the page
    carousel.data('originalHtml', carousel.html());
  }
  carousel.owlCarousel(....)
})

Это немного странно, но я нашел единственный способ использовать плагины, которые не готовы работать с турболинками, без изменения этих плагинов.

АноДругой вариант - просто отключить Turbolinks, если вы считаете, что он вам просто не нужен.

...