Реактивность и обновления

Библиотека Muuri предоставляет мощные возможности для динамического управления сеткой элементов, включая автоматическую реактивность на изменения контента и обновление расположения элементов. Понимание механизма реактивности позволяет создавать гибкие интерфейсы, где сетка адаптируется к изменениям DOM без необходимости ручного вмешательства.

Автоматическое обновление сетки

Muuri использует внутренний механизм layout engine, который обеспечивает перестройку сетки при изменении размеров или позиции элементов. Основные моменты работы:

  • Наблюдение за размерами элементов: Muuri отслеживает ширину и высоту элементов с помощью ResizeObserver. При изменении размеров вызывается перестройка сетки.
  • Обновление при добавлении и удалении элементов: Методы add() и remove() автоматически инициируют перерасчет расположения. Добавленные элементы анимированно интегрируются в сетку.
  • Пользовательская принудительная реактивность: В случаях, когда DOM меняется вне контекста Muuri (например, внешние скрипты изменяют размеры элементов), используется метод refreshItems() для обновления внутренних данных о размерах элементов.

Пример обновления сетки после изменения размера элемента:

const grid = new Muuri('.grid', {
  dragEnabled: true,
});

// Изменение размеров внешним скриптом
const item = grid.getItems()[0].getElement();
item.style.width = '300px';

// Обновление сетки
grid.refreshItems().layout();

Методы для реактивности

Muuri предоставляет ряд методов, обеспечивающих динамическое управление сеткой:

  1. refreshItems([items]) – обновляет внутреннее состояние указанных элементов или всей сетки, пересчитывая размеры.
  2. layout([instant], [callback]) – пересчитывает расположение элементов. Параметр instant отключает анимацию.
  3. add(elements, [options]) – добавляет новые элементы в сетку с автоматической анимацией.
  4. remove(items, [options]) – удаляет элементы из сетки, с возможностью анимации или мгновенного удаления.
  5. filter(predicate, [options]) – скрывает или отображает элементы на основе условия, вызывая перерасчет расположения.
  6. sort(comparator, [options]) – сортирует элементы по заданному критерию, обеспечивая плавную анимацию перестановки.

Эти методы позволяют создавать интерфейсы, где сетка реагирует на любые изменения контента, фильтрацию и сортировку без ручной верстки.

Реактивная фильтрация и сортировка

Muuri поддерживает динамическую фильтрацию и сортировку элементов. Это особенно важно для интерактивных интерфейсов, где содержимое часто меняется.

  • Фильтрация: элементы, не соответствующие условию, скрываются, а оставшиеся автоматически перераспределяются. Пример:
grid.filter(item => item.getElement().dataset.category === 'active');
  • Сортировка: элементы переставляются с анимацией, основываясь на заданной функции сравнения:
grid.sort((a, b) => {
  return a.getElement().dataset.order - b.getElement().dataset.order;
});

С помощью этих инструментов сетка может оставаться актуальной и визуально привлекательной даже при динамическом изменении данных.

Обработка внешних изменений

Muuri позволяет интегрировать внешние изменения DOM через комбинацию методов refreshItems() и layout(). Часто используются следующие сценарии:

  • Изменение размеров контента (например, подгрузка изображений или текста).
  • Добавление новых элементов через AJAX.
  • Удаление элементов по событиям пользователя.
// После асинхронной подгрузки контента
fetch('/new-items')
  .then(res => res.json())
  .then(data => {
    const elements = data.map(item => {
      const el = document.createElement('div');
      el.classList.add('item');
      el.textContent = item.name;
      return el;
    });
    grid.add(elements);
  });

В данном примере новые элементы интегрируются в сетку с анимацией, сохраняя реактивность.

Настройка анимаций при обновлении

Анимации являются ключевой частью реактивного поведения Muuri. Параметры, влияющие на обновление:

  • duration – продолжительность анимации перестановки.
  • easing – кривые ускорения для плавности перемещения.
  • layoutOnResize – автоматический пересчет сетки при изменении размеров контейнера.
  • dragEnabled – включение перетаскивания элементов с динамическим пересчетом позиций.
const grid = new Muuri('.grid', {
  layout: {
    duration: 400,
    easing: 'ease',
  },
  layoutOnResize: true,
});

Эти настройки обеспечивают плавную реакцию на любые изменения элементов или контейнера.

Интеграция с другими фреймворками

Muuri можно интегрировать с React, Vue и другими фреймворками, используя методы обновления для реактивного управления DOM:

  • В React вызывается refreshItems() после изменения состояния компонента.
  • В Vue применяется наблюдение за массивом элементов и вызов layout() после добавления/удаления.

Пример с React:

useEffect(() => {
  grid.current.refreshItems().layout();
}, [items]);

Это гарантирует, что сетка всегда соответствует текущему состоянию данных.

Muuri обеспечивает комплексную реактивность, автоматическое обновление размеров, фильтрацию, сортировку и интеграцию с динамическими интерфейсами. Правильное использование методов refreshItems(), layout(), add() и remove() позволяет создавать интерфейсы, где сетка элементов всегда актуальна, плавно анимирована и полностью управляется скриптами без ручного вмешательства.

Оглавление