Несколько слайд-шоу Flickity и динамическое добавление одного - PullRequest
Новая
       60

Несколько слайд-шоу Flickity и динамическое добавление одного

0 голосов
/ 05 апреля 2020

У меня есть сетка элементов на странице моего сайта. Время от времени элемент сетки выводит оболочку с количеством дочерних элементов. Каждую из этих оболочек я установил в качестве слайдера Flickity, а их дочерние элементы были слайдами.

Я инициализировал его, выполнив следующие действия: 

import Flickity from 'flickity'

export let cVWrapperFlkty

document.addEventListener('DOMContentLoaded', e => {
    document.querySelectorAll('.c-v-wrapper').forEach(cvw => {
        cVWrapperFlkty = new Flickity( cvw, {
            prevNextButtons: false,
            pageDots: false,
            contain: true
        });
    })
})

Все это прекрасно работает. Следующая часть - то, где это ломается. Над сеткой у меня есть ссылки на страницы. При щелчке моя страница запрашивает файл json, который заменяет текущую сетку элементов новым набором, который был задан с помощью рулей JS.

Проблема в том, что Flickity теперь не был настроен для новых .c-v-wrapper элементов в сетке.

Как я могу настроить приведенный выше код так, чтобы любые добавленные новые элементы .c-v-wrapper автоматически инициализировались?

После содержимого сетка заменяется Я попытался добавить следующее, но, похоже, ничего не делает. Я предполагаю, что это потому, что переменная cVWrapper по-прежнему ссылается на предыдущие экземпляры Flickity, которые больше не существуют в DOM? Это звучит правильно? 

cVWrapperFlkty.reloadCells()

1 Ответ

0 голосов
/ 06 апреля 2020

Один из способов сделать это - MutationObserver, который предназначен для отслеживания изменений в дереве DOM.

Вот пример того, как это может работать для вас: 

// observe-added-node.js


// Options for the observer (which mutations to observe)
// Callback function to execute when mutations are observed
export default function observeAddedNode(classSelector, callback) {
  // Create an observer instance linked to the callback function
  const observer = new MutationObserver(function onAddedNode(mutationsList, observer) {
    mutationsList.forEach(mutation => {
      if (mutation.type === 'childList') {
        mutation.addedNodes.forEach(node => {
          if (node.classList && node.classList.contains(classSelector)) {
            callback(node)

            // observer.disconnect() if you don't need to watch for new changes
          }
        })
      }
    })
  })

  // Start observing the target node for configured mutations
  observer.observe(document.querySelector('body'), { childList: true })
}

// ...

// flickity-grid.js

import Flickity from 'flickity'
import observeAddedNode from './observe-added-node'

observeAddedNode('c-v-wrapper', (node) => {
  new Flickity(node, { /* options... * / })
})

Вот несколько полезных ресурсов, чтобы узнать больше о MutationObserver:

...