Метод refreshItems

Метод refreshItems является одной из ключевых функций в библиотеке Muuri, предназначенной для динамического управления сетками и сеточными элементами на веб-странице. Его основное назначение — синхронизация внутреннего состояния сетки с фактическими DOM-элементами после изменений структуры или содержимого элементов.

Основное назначение

refreshItems используется для:

  • Обновления внутренних данных сетки после добавления, удаления или изменения элементов.
  • Пересчёта размеров и позиции элементов, что необходимо для корректной работы сортировки, фильтрации и анимаций.
  • Синхронизации объектов Muuri с DOM, чтобы методы вроде layout(), sort() и filter() работали корректно.

Важно: без вызова refreshItems изменения в DOM не всегда корректно отражаются в сетке.

Синтаксис

grid.refreshItems(items, keepSort);

Параметры:

  1. items (необязательный) — массив элементов или объектов Muuri, которые требуется обновить. Если не указан, обновляются все элементы сетки.

  2. keepSort (необязательный, по умолчанию false) — логическое значение, определяющее, сохранять ли текущий порядок сортировки элементов.

    • true — порядок сортировки сохраняется.
    • false — порядок может быть пересчитан в соответствии с внутренними данными сетки.

Возвращаемое значение: Метод возвращает массив объектов Muuri, соответствующих обновлённым элементам.

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

Обновление всех элементов сетки:

const grid = new Muuri('.grid');
grid.refreshItems().layout();

В этом примере после вызова refreshItems метод layout() пересчитывает позиции всех элементов и анимирует изменения.

Обновление конкретного элемента:

const grid = new Muuri('.grid');
const itemToUpdate = document.querySelector('.item-to-update');

grid.refreshItems([itemToUpdate]).layout();

Использование массива элементов позволяет обновлять только часть сетки, экономя ресурсы при больших коллекциях.

С сохранением сортировки:

grid.refreshItems(null, true).layout();

С помощью keepSort = true можно обновить размеры элементов без изменения их текущего порядка.

Внутренние механизмы

При вызове refreshItems происходит:

  1. Сбор актуальных размеров элементов через getBoundingClientRect().

  2. Пересчёт внутреннего состояния объектов Muuri:

    • width и height каждого элемента.
    • x и y позиции на сетке.
    • Прочие метаданные, такие как visible и sortData.

  3. Обновление карты элементов внутри сетки, чтобы последующие методы (layout, filter, sort) работали с актуальной информацией.

Практические сценарии применения

  1. Динамическая загрузка контента: Когда элементы загружаются асинхронно (например, через AJAX), необходимо вызвать refreshItems после добавления новых DOM-узлов, чтобы сетка корректно их включила.

  2. Изменение размеров элементов: Если контент элемента изменился (например, текст или изображение), вызов refreshItems гарантирует корректное размещение соседних элементов.

  3. Фильтрация и сортировка: После обновления данных элементов сетки (например, через изменение пользовательских атрибутов) refreshItems обновляет внутренние метаданные для методов filter() и sort().

  4. Оптимизация производительности: В больших сетках рекомендуется обновлять только изменённые элементы, передавая их в массив items, чтобы избежать лишнего пересчёта всех элементов.

Советы по использованию

  • Всегда вызывать layout() после refreshItems, если требуется визуальное обновление сетки.
  • Для больших сеток объединять несколько изменений в один вызов refreshItems, чтобы уменьшить количество перерасчётов.
  • Использовать параметр keepSort, когда необходимо сохранить текущий порядок сортировки при обновлении размеров или содержимого элементов.

Метод refreshItems является фундаментальным для управления динамическими сетками в Muuri. Его правильное использование обеспечивает стабильную и отзывчивую работу сетки при любых изменениях DOM или содержимого элементов.

Оглавление