Обновление контекста

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

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

Определение контекста через селекторы

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

<a href="/posts/42" up-target="#post-42">Редактировать</a>

В данном примере при клике на ссылку будет обновлён элемент с id="post-42". Unpoly автоматически подгружает новый HTML-фрагмент и вставляет его в указанный контейнер.

Если up-target не указан, контекст определяется ближайшим контейнером с классом up-target или по умолчанию применяются глобальные настройки.

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

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

<div id="comments">
  <div class="comment" id="comment-1">
    <a href="/comments/1/edit" up-target=".comment">Редактировать</a>
  </div>
</div>

При клике на ссылку будет обновлён только элемент с классом .comment внутри контейнера #comments.

Динамический контекст позволяет задавать селекторы через Jav * aScript:

up.click('#dynamic-link', { target: '#dynamic-container' });

Здесь контекст определяется в момент вызова метода, что особенно удобно при работе с элементами, создаваемыми динамически после загрузки страницы.

Управление заменой содержимого

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

  • Полная замена (replace) — новый HTML полностью заменяет старый контейнер:
<div id="post-42" up-target="this" up-replace>
  ...
</div>
  • Вставка в начало или конец (prepend / append) — позволяет добавлять элементы в существующий контейнер:
<ul id="comments">
  <li up-target="#comments" up-append>
    Новый комментарий
  </li>
</ul>
  • Вставка до или после (before / after) — используется для позиционного добавления контента относительно существующего элемента.

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

Контекст и события жизненного цикла

Unpoly обеспечивает события жизненного цикла, которые привязаны к обновлению контекста:

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

Пример использования:

up.on('up:fragment:loaded', '#post-42', function(event) {
  console.log('Контент обновлён', event.fragment);
});

События можно использовать для повторной инициализации плагинов или привязки обработчиков к новым элементам внутри обновлённого контекста.

Изоляция контекста и вложенные обновления

Unpoly позволяет изолировать обновления, чтобы изменения в одном контейнере не затрагивали другие. Для этого используются атрибуты up-scope и up-target вместе:

<div id="sidebar" up-scope>
  <a href="/menu" up-target="#menu">Обновить меню</a>
</div>
  • up-scope ограничивает область поиска целей и событий.
  • up-target указывает точку обновления внутри этой области.

Это особенно полезно при работе с модальными окнами и динамическими панелями, где требуется локализованное обновление.

Контекст при отправке форм

Формы в Unpoly автоматически используют контекст для обновления результата отправки. Пример:

<form action="/posts" method="post" up-target="#posts-list">
  <input name="title">
  <button type="submit">Добавить</button>
</form>

После отправки формы содержимое контейнера #posts-list будет обновлено новым списком постов.

Можно комбинировать стратегии вставки и обработку ошибок:

<form action="/comments" method="post" up-target="#comments" up-append>
  <input name="body">
  <button type="submit">Отправить</button>
</form>

В этом случае новый комментарий добавляется в конец списка, не трогая существующие элементы.

Рекурсивное обновление контекста

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

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

  • Использовать уникальные селекторы для up-target во избежание конфликтов.
  • Для сложных интерфейсов применять up-scope для изоляции областей.
  • Комбинировать стратегии вставки (replace, append, prepend) для эффективного управления DOM.
  • Применять события жизненного цикла для инициализации динамических элементов после обновления контекста.
  • Минимизировать полные перезагрузки, чтобы сохранить состояние других компонентов на странице.

Эти принципы позволяют строить быстрые и отзывчивые интерфейсы с минимальными затратами на обновление всей страницы.

Оглавление