Чтение контекста

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

Контекст и область обновления

Контекст в Unpoly представлен объектом up.Context. Он содержит всю информацию о текущем обновлении страницы: источник действия, цель, состояние формы и параметры запроса. Основные свойства контекста:

  • target — CSS-селектор или DOM-элемент, который будет обновлён.
  • origin — элемент, вызвавший действие, например кнопка или ссылка.
  • options — объект с дополнительными параметрами, такими как метод запроса (GET или POST), заголовки, анимации и кэширование.
  • form — объект формы, участвующей в запросе, если действие инициировано отправкой формы.
  • url — конечный URL запроса, который будет загружен в целевой элемент.

Контекст создаётся автоматически при любом действии Unpoly, но его можно создавать и вручную через up.render.

up.render('#content', '/posts/42', {
  method: 'GET',
  fade: true
});

В этом примере контекст включает #content как target, URL /posts/42 и метод GET. Опция fade задаёт эффект анимации при обновлении элемента.

Вложенные контексты

Unpoly поддерживает вложенные контексты, что позволяет одновременно обновлять несколько областей страницы. Каждый вложенный контекст наследует часть параметров родителя, но может переопределять target, url и options.

Пример обновления двух блоков одновременно:

up.render({
  '#sidebar': '/sidebar',
  '#main': '/main'
}, {
  fade: true
});

Каждое обновление создаёт свой контекст, который можно отслеживать с помощью событий.

События контекста

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

  • up:fragment:loading — срабатывает при начале загрузки фрагмента.
  • up:fragment:loaded — при успешной загрузке.
  • up:fragment:revealed — после отображения обновлённого блока.
  • up:fragment:failed — при ошибке загрузки.

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

document.body.addEventListener('up:fragment:loaded', event => {
  console.log(event.target); // элемент, который обновился
  console.log(event.detail.context.url); // URL запроса
});

Объект контекста в event.detail.context содержит все свойства, включая origin, target, options, form и url.

Управление контекстом через API

Контекст можно создавать и изменять вручную:

  • Создание контекста для конкретного элемента:
const ctx = new up.Context({
  target: '#modal',
  origin: document.querySelector('#open-modal'),
  url: '/modal/content'
});
up.render(ctx);
  • Клонирование и модификация контекста:
const newCtx = ctx.clone();
newCtx.target = '#sidebar';
up.render(newCtx);

Метод clone копирует все параметры исходного контекста, позволяя создавать похожие обновления с небольшими изменениями.

Передача данных через контекст

Контекст обеспечивает гибкую передачу данных на сервер:

  • options.params — объект дополнительных параметров запроса.
  • form — данные формы автоматически сериализуются при отправке.

Пример передачи кастомных данных:

up.render('#main', '/search', {
  params: { query: 'Unpoly', page: 2 }
});

В этом случае сервер получает объект { query: 'Unpoly', page: 2 }, а обновлённый контент вставляется в #main.

Контекст и кэширование

Unpoly поддерживает кэширование фрагментов через контекст. Каждый контекст может хранить загруженный HTML, чтобы при повторном вызове не делать повторный запрос:

up.render('#main', '/posts/42', {
  cache: true
});

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

Контекстные условия

Контекст может включать условия отображения через if и unless:

up.render('#main', '/profile', {
  if: element => element.dataset.visible !== 'false'
});

Если функция возвращает false, обновление не произойдёт. Это полезно для динамического контроля загрузки блоков в зависимости от состояния страницы.

Итоговое понимание

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

  • целевом элементе (target),
  • источнике действия (origin),
  • параметрах запроса (url, options),
  • данных формы (form),
  • кэшировании и условиях отображения.

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

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

Оглавление