Данные слоев

Unpoly предоставляет мощный механизм управления слоями (layers), позволяя строить сложные интерфейсы без полной перезагрузки страницы. Слои — это изолированные области DOM, которые можно обновлять, заменять или добавлять динамически. Данные слоев (layer data) позволяют хранить и передавать информацию между слоями, управлять состоянием интерфейса и организовывать динамическое поведение элементов.

Идентификаторы слоев и их иерархия

Каждый слой имеет уникальный идентификатор layer.id, который автоматически генерируется или задаётся вручную через атрибут up-layer. Идентификатор слоя используется для:

  • Обращения к конкретному слою через API up.layer.find(id).
  • Определения родительского и дочернего слоя в иерархии.
  • Сохранения данных, специфичных для конкретного слоя.

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

Хранение данных слоя

Unpoly предоставляет объект layer.data, где можно хранить любые ключ-значение пары, относящиеся к конкретному слою:

up.layer.find('comments').data.userId = 42;
up.layer.find('comments').data.page = 3;

Данные слоя существуют только внутри его жизненного цикла. После закрытия слоя или его замены данные автоматически удаляются, что предотвращает утечки состояния между слоями.

Основные методы работы с данными слоя:
  • up.layer.find(id).data[key] = value — установка данных.
  • let value = up.layer.find(id).data[key] — получение данных.
  • delete up.layer.find(id).data[key] — удаление данных.

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

При создании нового слоя можно передавать инициализационные данные через параметр data:

up.link('#show-settings', {
  layer: 'modal',
  data: { theme: 'dark', fontSize: 14 }
});

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

let layer = up.layer.find('modal');
console.log(layer.data.theme); // 'dark'
console.log(layer.data.fontSize); // 14

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

Наследование данных между слоями

Unpoly позволяет дочерним слоям наследовать данные от родительского слоя. Если при открытии нового слоя не указаны свои данные, они будут доступны через layer.parent.data:

let parentLayer = up.layer.find('parent');
up.layer.open('/child', {
  layer: 'modal',
  data: parentLayer.data
});

Это обеспечивает консистентность состояния интерфейса и упрощает управление вложенными слоями.

Прослушивание изменений данных

Для реактивного обновления элементов в зависимости от данных слоя можно использовать событие up:layer:updated:

up.on('up:layer:updated', '[up-layer]', function(event) {
  let layer = event.layer;
  console.log('Данные слоя обновлены:', layer.data);
});

Это позволяет:

  • Автоматически обновлять видимые элементы при изменении данных.
  • Реализовать динамическую подгрузку контента, зависящего от состояния слоя.
  • Отслеживать пользовательские действия и синхронизировать данные между слоями.

Использование данных слоя в шаблонах

Данные слоя можно использовать прямо в HTML через data-атрибуты и up-data:

<div up-layer="user-info" up-data='{"userId": 42, "role": "admin"}'>
  <span>User ID: <span up-text="layer.data.userId"></span></span>
  <span>Role: <span up-text="layer.data.role"></span></span>
</div>

При обновлении слоя значения up-text автоматически подтягиваются из layer.data, что упрощает создание динамических компонентов без ручной работы с DOM.

Сценарии применения

  1. Модальные окна с контекстом — передача данных о выбранном объекте без изменения основной страницы.
  2. Многошаговые формы — каждый шаг хранит своё состояние в отдельном слое.
  3. Вложенные панели — дочерние слои наследуют параметры родителя, например фильтры или настройки интерфейса.
  4. Реактивные виджеты — динамическое отображение информации при изменении данных слоя.

Советы по оптимизации

  • Хранить в layer.data только необходимое состояние, избегая тяжёлых объектов.
  • Удалять ненужные ключи через delete для снижения нагрузки памяти.
  • Использовать layer.id и layer.parent для точного контроля вложенности слоев.
  • Для глобальных данных применять отдельные структуры вне слоев, чтобы не создавать сильную связку между компонентами.

Работа с данными слоев делает Unpoly мощным инструментом для построения интерактивных и модульных интерфейсов, где каждый слой управляет своим состоянием, а данные легко передаются между уровнями приложения.

Оглавление