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

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

Основные принципы контекста

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

  • Контейнер: каждый запрос в Unpoly выполняется относительно определённого контейнера. Контейнер может быть элементом с атрибутом up-target или, если атрибут не задан, документом (document).
  • Иерархия контекстов: контейнеры могут быть вложенными. Например, обновление формы внутри модального окна не затронет другие части страницы. Unpoly сохраняет информацию о том, какой контейнер инициировал запрос, что позволяет управлять локальной областью обновления.
  • Передача контекста: при навигации или отправке форм Unpoly может автоматически переносить параметры контекста, включая up-target, up-layer, состояние модального окна или панели.

Атрибуты, управляющие контекстом

Unpoly использует HTML-атрибуты, чтобы указать контекст обновления:

  • up-target: определяет CSS-селектор, который указывает, какой элемент будет заменён содержимым ответа сервера.

    <a href="/profile" up-target="#main-content">Профиль</a>

    В этом примере клик по ссылке обновит только элемент с id main-content.

  • up-layer: указывает слой интерфейса, в котором будет происходить действие (например, модальные окна, панели, или основной слой страницы). Слои помогают управлять вложенными контекстами без конфликта.

    <button up-layer="modal" up-target="#modal-body">Открыть форму</button>

  • up-swap: описывает способ замены содержимого целевого контейнера (replace, append, prepend, after, before). Способ замены является частью контекста, так как он определяет, как новые данные интегрируются в DOM.

    <div id="notifications" up-swap="prepend"></div>

Работа с контекстом через JavaScript

Unpoly предоставляет API для управления контекстом программно. Основные методы:

  • up.render(content, options) — рендерит HTML в заданный контекст.

    up.render('<p>Новый контент</p>', { target: '#main-content' });

  • up.reload(selector, options) — обновляет элемент, используя текущий контекст и параметры запроса.

    up.reload('#sidebar', { layer: 'sidebar' });

  • up.layer.get(elementOrSelector) — возвращает объект слоя, которому принадлежит элемент. Позволяет определить текущий контекст для сложных интерфейсов с модальными окнами и панелями.

Контекст также используется для фильтрации событий. Например, событие up:fragment:loaded передаёт информацию о контейнере, который был обновлён, что позволяет реагировать только на нужный элемент страницы:

document.addEventListener('up:fragment:loaded', function(event) {
  console.log('Обновлён элемент:', event.target);
});

Вложенные контексты и наследование

Контексты могут быть вложенными. При обновлении дочернего контейнера Unpoly учитывает родительский контекст:

  • Наследование параметров запроса: дочерний контейнер автоматически получает параметры родителя, если они явно не переопределены.
  • Локальные события: события, привязанные к родительскому контексту, могут не срабатывать на дочернем, если был указан отдельный слой или up-target.

Пример вложенного контекста:

<div id="dashboard">
  <div id="widgets" up-target=".widget">
    <div class="widget" id="widget-1">
      <button up-target="#widget-1">Обновить виджет</button>
    </div>
  </div>
</div>

Нажатие кнопки обновит только конкретный виджет, сохранив остальную часть панели нетронутой.

Контекст и модальные окна

Модальные окна в Unpoly — это отдельные слои. Контекст модального окна отличается от контекста основной страницы:

  • Изоляция обновлений: изменения внутри модального окна не затрагивают основной слой.
  • Контекст возвращается при закрытии модального окна: состояние страницы восстанавливается.
  • Можно программно передавать контекст из модального окна на родительский слой:
up.layer.get('modal').hide({ result: { updated: '#main-content' } });

Резюме ключевых моментов

  • Контекст — это область страницы, на которую распространяются действия Unpoly.
  • Основные элементы контекста: контейнер, слой, способ замены (swap).
  • Контекст можно задавать через атрибуты up-target, up-layer, up-swap.
  • Вложенные контексты позволяют изолировать обновления и события.
  • JavaScript API Unpoly позволяет управлять контекстом динамически.

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

Оглавление