Синхронизация состояния

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

Внутреннее состояние элементов

Каждый элемент Muuri представлен объектом Muuri.Item, который содержит:

  • Элемент DOM (element) — прямое обращение к HTML-узлу.
  • Индекс позиции (getIndex()) — текущее положение элемента в сетке.
  • Свойства сортировки и фильтрации — определяют видимость элемента и порядок его отображения.

Состояние сетки хранится внутри объекта Muuri и отражает текущее расположение всех элементов. Важно понимать, что изменение DOM напрямую не синхронизирует Muuri: изменения нужно выполнять через API библиотеки.

Обновление и синхронизация элементов

Для того чтобы сетка корректно отображала изменения, Muuri предоставляет методы:

refreshItems([items])

Обновляет свойства элементов.

grid.refreshItems(); // обновление всех элементов
grid.refreshItems([item1, item2]); // обновление конкретных элементов
  • Пересчитывает размеры элементов.
  • Пересчитывает положение в сетке.
  • Не меняет порядок, пока не вызван layout().

layout([instant])

Применяет пересчитанное расположение элементов на странице.

grid.layout(); // с анимацией
grid.layout(true); // без анимации
  • При вызове layout() Muuri синхронизирует внутренние координаты с DOM.
  • Обязателен после динамического добавления или удаления элементов, если требуется анимация.

add(items, [options]) и remove(items, [options])

Добавление и удаление элементов:

grid.add(newElements, { index: 0 });
grid.remove([itemToRemove], { removeElements: true });
  • Автоматически синхронизирует состояние сетки.
  • Позволяет управлять индексами и анимацией.

Важно: после add или remove рекомендуется вызвать layout() для корректного отображения.

События для отслеживания изменений

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

  • move — элемент изменил позицию.
  • add / remove — добавление или удаление элемента.
  • filter / sort — элементы подверглись фильтрации или сортировке.

Пример использования события move:

grid.on('move', function (items) {
  console.log('Элементы перемещены:', items);
});
  • Позволяет обновлять сопутствующие данные в массиве или базе данных.
  • Обеспечивает синхронизацию визуального состояния и логики приложения.

Поддержка синхронизации с внешними данными

При работе с динамическими коллекциями важно поддерживать соответствие между данными и элементами Muuri:

  1. Создавать элементы на основе данных:
const items = data.map(obj => {
  const el = document.createElement('div');
  el.textContent = obj.name;
  return el;
});
grid.add(items);

  1. Использовать refreshItems() после изменения данных, чтобы Muuri пересчитал размеры и позиции.

  2. Обновлять свойства элементов через item.getElement() или методы update():

item.getElement().textContent = newValue;
item.refresh(); // синхронизирует с DOM

Особенности асинхронной синхронизации

Если данные обновляются динамически с сервера, рекомендуется:

  • Вставлять новые элементы через add().
  • Удалять устаревшие через remove().
  • Вызывать layout() после каждой партии изменений.
fetch('/api/items')
  .then(res => res.json())
  .then(newData => {
    const newElements = newData.map(obj => document.createElement('div'));
    grid.add(newElements);
    grid.layout();
  });
  • Это предотвращает рассинхронизацию сетки и обеспечивает плавную анимацию.

Оптимизация производительности

Для больших сеток:

  • Группировать обновления: вызывать layout() один раз после нескольких изменений.
  • Использовать refreshItems(items) вместо полного обновления, если известен список изменённых элементов.
  • Отключать анимацию при массовом обновлении: layout(true).

Эти практики позволяют избежать лишних перерисовок и повышают отзывчивость интерфейса.

Интеграция с фильтрацией и сортировкой

При динамическом изменении состояния фильтров или сортировки важно:

  1. Обновлять свойства item.getElement().dataset или другие критерии.
  2. Вызывать filter() или sort() после изменения данных.
  3. Завершить операцию вызовом layout() для синхронизации DOM и внутреннего состояния Muuri.

Пример фильтрации по категории:

grid.filter(item => item.getElement().dataset.category === 'active');
grid.layout();

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

Оглавление