Контекст слоев

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

Слои и их иерархия

Unpoly использует модель слоев, где каждый слой — это область DOM, которую библиотека может обновлять независимо. Слой определяется через атрибут up-target или создаётся автоматически при выполнении навигации. Слои имеют следующие особенности:

  • Идентификатор слоя (layerId) уникален и позволяет управлять его состоянием.
  • Родительский слой: слои могут быть вложенными. При открытии модального окна создаётся дочерний слой поверх текущего.
  • Автономность: каждый слой имеет собственный контекст для обработчиков событий, истории браузера и анимаций.

Иерархия слоев выглядит как дерево: корневой слой соответствует основной странице, дочерние слои могут открываться поверх него (например, модальные окна, всплывающие панели).

Контекст слоя

Контекст слоя — это совокупность состояния и конфигурации слоя. Он включает:

  • Элемент DOM, связанный со слоем.
  • Обработчики событий, которые применяются только к элементам этого слоя.
  • Историю навигации, позволяющую откатывать изменения при закрытии дочернего слоя.
  • Параметры конфигурации, такие как анимации (up-transition), поведение при загрузке (up-on-load) и при отмене (up-on-cancel).

Контекст слоя обеспечивает изоляцию обновлений. Изменения внутри слоя не влияют на родительский слой, если это не явно указано через опции up-target или up-layer.

Создание и управление слоями

Слои создаются автоматически при вызове методов навигации Unpoly, таких как up.navigate или up.modal. Пример:

up.modal('/users/42/edit', { 
  layer: 'modal' 
});

В этом примере:

  • Создаётся новый слой с идентификатором modal.
  • Слой наследует часть контекста от родительского слоя (например, текущие данные формы), но остаётся изолированным для обновлений.
  • После закрытия модального окна изменения в слое автоматически удаляются, а родительский слой остаётся в прежнем состоянии.

Навигация между слоями

Unpoly поддерживает управление историей слоев. Каждый слой может содержать собственные состояния истории. Это позволяет:

  • Перемещаться вперёд и назад без перезагрузки страницы.
  • Сохранять контекст формы или таблицы внутри слоя при переходах.
  • Автоматически удалять дочерние слои при возврате в родительский слой.

Методы для работы с историей слоев:

// Переход к новому URL внутри текущего слоя
up.layer.current.navigate('/dashboard');

// Возврат к предыдущему состоянию слоя
up.layer.current.pop();

События, связанные с контекстом слоев

Контекст слоя генерирует собственные события, которые позволяют контролировать поведение интерфейса:

  • up:layer:opened — срабатывает после создания нового слоя.
  • up:layer:closed — вызывается при закрытии слоя и удалении его из DOM.
  • up:layer:updated — информирует о том, что слой получил новый контент.

Привязка обработчиков к конкретному слою гарантирует, что они не будут мешать другим слоям:

up.on('up:layer:opened', { layer: 'modal' }, () => {
  console.log('Модальное окно открыто');
});

Наследование контекста

Дочерние слои могут наследовать часть состояния родительского слоя:

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

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

Контроль закрытия слоев

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

  • Автоматическое закрытие: дочерние слои удаляются при закрытии родителя.
  • Программное закрытие:
up.layer.get('modal').close();
  • События перед закрытием (up:layer:closing), которые позволяют отменить закрытие при необходимости.

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

  • Использовать слои для логически изолированных компонентов, таких как модальные окна, вкладки, диалоговые формы.
  • Не смешивать обновления родительского и дочернего слоев без явного указания up-target.
  • Для сложных интерфейсов с несколькими вложенными слоями внимательно управлять идентификаторами слоев, чтобы избежать конфликтов.

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

Оглавление