Метод updateSortData

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

Синтаксис

$grid.isotope('updateSortData', $items)
  • $grid — контейнер Isotope, инициализированный на выбранном элементе.
  • $items — необязательный параметр. Массив или jQuery-объект элементов, для которых необходимо обновить данные сортировки. Если параметр опущен, метод пересчитывает данные для всех элементов в сетке.

Принцип работы

Isotope использует объект sortData для хранения значений, по которым производится сортировка. Каждое поле sortData может быть задано при инициализации через опцию getSortData:

$('.grid').isotope({
  getSortData: {
    name: '.name',        // текстовый контент элемента
    price: '[data-price]', // значение из атрибута data-price
    date: function(itemElem) {
      return Date.parse($(itemElem).find('.date').text());
    }
  }
});

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

$grid.isotope('updateSortData', $('.grid-item'));

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

Если не передавать аргументы, метод пересчитывает данные сортировки для всей сетки:

$grid.isotope('updateSortData');

Это полезно при массовых изменениях элементов или при динамическом добавлении новых элементов в сетку через appended:

var $newItems = $(newItemsHTML);
$grid.append($newItems)
     .isotope('appended', $newItems)
     .isotope('updateSortData'); // пересчет сортировочных данных для всех элементов

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

1. Обновление данных после изменения текста

$('.grid-item').each(function() {
  $(this).find('.price').text(Math.floor(Math.random() * 100));
});

$grid.isotope('updateSortData');
$grid.isotope({ sortBy: 'price' });

В этом примере значения data-price или текста .price изменяются динамически. Метод updateSortData гарантирует, что сортировка будет выполнена по новым данным.

2. Обновление данных для отдельных элементов

var $changedItems = $('.grid-item.updated');
$grid.isotope('updateSortData', $changedItems);
$grid.isotope({ sortBy: 'name' });

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

Особенности и рекомендации

  • Метод не меняет порядок элементов, а лишь обновляет внутренние значения, используемые для сортировки.
  • После вызова updateSortData необходимо вызвать isotope({ sortBy: ... }), если требуется немедленная сортировка по новым данным.
  • Для больших сеток с сотнями элементов обновление данных для всех элементов может быть ресурсоёмким; рекомендуется обновлять только изменённые элементы.
  • Если sortData основаны на вычисляемых функциях, метод updateSortData автоматически вызывает эти функции для соответствующих элементов.

Совместимость с динамическим контентом

Метод отлично сочетается с функциями добавления (appended) и удаления (remove) элементов:

var $newItems = $(newItemsHTML);
$grid.append($newItems)
     .isotope('appended', $newItems)
     .isotope('updateSortData', $newItems)
     .isotope({ sortBy: 'date' });

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

Итоговый механизм

  1. Изменение контента или атрибутов элементов.
  2. Вызов updateSortData для пересчета данных сортировки.
  3. Сортировка или перестановка элементов с помощью опции sortBy.

Такой подход делает Isotope гибким инструментом для создания динамических сеток, где содержимое элементов меняется во времени, и упрощает поддержку актуальной сортировки без полной реинициализации.

Оглавление