Передача данных в события

В библиотеке Packery работа с событиями — ключевой инструмент для динамического управления сеткой элементов. Каждое событие сопровождается объектом события, который может содержать дополнительные данные. Packery позволяет передавать пользовательские данные при вызове событий, что расширяет возможности управления поведением сетки и элементов.

События и их структура

События в Packery реализованы через систему EventEmitter, что делает их совместимыми с большинством популярных подходов к обработке событий в JavaScript. Каждое событие передает объект event и объект data. Стандартная структура:

grid.on('layoutComplete', function(event, items) {
  console.log(items);
});
  • event — стандартный объект события JavaScript.
  • items — массив объектов Packery элементов, задействованных в событии.

Передача пользовательских данных

Packery позволяет расширять стандартные события за счет передачи собственных данных. Для этого используются методы emitEvent и dispatchEvent. Пример создания пользовательского события с передачей данных:

// Инициализация Packery
var grid = new Packery('.grid', {
  itemSelector: '.grid-item',
  gutter: 10
});

// Пользовательские данные
var customData = { message: 'Элемент добавлен', id: 42 };

// Вызов пользовательского события
grid.emitEvent('customAdd', [customData]);

Обработка события с доступом к данным:

grid.on('customAdd', function(event, data) {
  console.log(data.message); // "Элемент добавлен"
  console.log(data.id);      // 42
});

Встраивание данных в элементы

Для более сложных сценариев можно прикреплять данные к отдельным элементам сетки через element.packeryData. Это позволяет событиям, таким как removeComplete или dragItemPositioned, передавать не только стандартные сведения об элементе, но и пользовательские свойства.

var itemElem = document.querySelector('.grid-item');
itemElem.packeryData = { category: 'photo', order: 3 };

grid.on('removeComplete', function(event, removedItems) {
  removedItems.forEach(function(item) {
    console.log(item.element.packeryData.category);
    console.log(item.element.packeryData.order);
  });
});

Передача данных при динамическом добавлении элементов

При добавлении элементов через метод append данные можно передавать сразу:

var newElem = document.createElement('div');
newElem.className = 'grid-item';
newElem.packeryData = { author: 'Alice', timestamp: Date.now() };

grid.appended(newElem);

grid.on('layoutComplete', function(event, items) {
  items.forEach(function(item) {
    if (item.element.packeryData) {
      console.log(item.element.packeryData.author);
      console.log(item.element.packeryData.timestamp);
    }
  });
});

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

Для обработки событий только для выбранных элементов можно использовать фильтры внутри обработчиков:

grid.on('dragItemPositioned', function(event, item) {
  if (item.element.packeryData && item.element.packeryData.category === 'photo') {
    console.log('Фотография перемещена:', item.element.packeryData);
  }
});

Обработка нескольких наборов данных

Packery позволяет передавать массивы объектов или даже сложные структуры:

var batchData = [
  { id: 1, name: 'Item A' },
  { id: 2, name: 'Item B' }
];

grid.emitEvent('batchAdd', [batchData]);

grid.on('batchAdd', function(event, dataArray) {
  dataArray.forEach(function(data) {
    console.log(data.id, data.name);
  });
});

Такой подход удобен для интеграции с внешними источниками данных, API и динамическими интерфейсами.

Важные моменты при передаче данных

  • Передача ссылок на объекты: данные передаются по ссылке, изменения в объекте после передачи будут видны в обработчике.
  • Совместимость с EventEmitter: Packery использует массив аргументов для передачи данных, важно соблюдать порядок при определении обработчиков.
  • Отдельные данные для элементов: хранение пользовательских данных непосредственно на DOM-элементах позволяет обрабатывать события локально для каждого элемента.

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

  • Отслеживание состояния сетки и отдельных элементов.
  • Передача информации о пользователях, категориях или временных метках.
  • Интеграция с внешними сервисами и динамическое обновление интерфейса при событиях Packery.

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

Оглавление