Именованные фрагменты

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

Основные концепции

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

<div id="notifications" up-fragment="notifications">
  <!-- Сюда будут подгружаться уведомления -->
</div>

<div id="content" up-fragment="content">
  <!-- Основной контент страницы -->
</div>

В примере выше определены два именованных фрагмента: notifications и content. При отправке AJAX-запроса можно указать, какой именно фрагмент требуется обновить.

Загрузка именованных фрагментов

Для обновления конкретного фрагмента используется атрибут up-target на ссылках или формах:

<a href="/messages" up-target="content">Загрузить сообщения</a>

Когда пользователь нажимает на ссылку, Unpoly отправляет запрос по указанному адресу и заменяет содержимое фрагмента content на ответ с сервера. Если сервер возвращает HTML с тем же именованным фрагментом, Unpoly автоматически подставляет его в нужное место страницы.

Структура ответа сервера

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

<div up-fragment="content">
  <h2>Список сообщений</h2>
  <ul>
    <li>Сообщение 1</li>
    <li>Сообщение 2</li>
  </ul>
</div>

<div up-fragment="notifications">
  <p>У вас 3 новых уведомления</p>
</div>

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

Работа с несколькими фрагментами

Unpoly позволяет одновременно обновлять несколько фрагментов. Для этого можно указать массив имен в up-target:

<a href="/dashboard" up-target="['content', 'notifications']">Обновить страницу</a>

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

Динамические фрагменты

Именованные фрагменты могут создаваться динамически через Jav * aScript:

up.render('#menu', '/menu', { target: 'menu' });

Метод up.render позволяет обновлять отдельный фрагмент, передавая селектор или имя фрагмента в параметре target. Если указано имя, Unpoly ищет элемент с соответствующим up-fragment.

Приоритет и совпадение

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

Сочетание именованных фрагментов с селекторами CSS также возможно. Например:

<a href="/profile" up-target="#sidebar, content">Обновить профиль</a>

Unpoly сначала пытается найти селектор #sidebar, а затем ищет фрагмент content по имени. Это позволяет комбинировать гибкость селекторов и удобство именованных фрагментов.

События при обновлении

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

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

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

up.on('up:fragment:loaded', { fragment: 'content' }, function(event) {
  console.log('Фрагмент content обновлен');
});

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

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

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

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

Оглавление