Режимы обновления

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

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

  • Целевой контейнер (target) — элемент на странице, в который будет подгружаться новый контент. Может быть указан с помощью CSS-селектора, например, #content или .main-panel.
  • Режим обновления (up-target и up-transition) — определяет способ вставки и анимации нового содержимого.

Режимы обновления

Unpoly поддерживает несколько режимов вставки контента, каждый из которых задаёт поведение при подгрузке HTML:

  1. replace (по умолчанию) Контейнер полностью заменяется новым содержимым. Это стандартный режим, который подходит для большинства обновлений.

    up.navigate('/profile', { target: '#content', mode: 'replace' });

    Новый HTML заменяет старый, при этом выполняются все стандартные хуки жизненного цикла: up:before-replace, up:replace, up:after-replace.

  2. insert Добавляет новый контент внутрь контейнера, не удаляя существующего. Может быть полезен для списков сообщений или комментариев.

    up.navigate('/comments', { target: '#comments', mode: 'insert' });

    Вставка происходит в конец контейнера по умолчанию, но можно указать точное место через up-insert атрибут (top, bottom, before, after).

  3. append / prepend Специальные варианты вставки для добавления элементов в начало (prepend) или конец (append) контейнера. Отличие от insert заключается в явной позиции:

    up.navigate('/notifications', { target: '#notifications', mode: 'prepend' });

  4. swap Новый контент заменяет старый, но элементы, отсутствующие в новом HTML, удаляются только после анимации. Это позволяет создавать более плавные переходы. Часто используется вместе с up-transition.

  5. none Контент загружается, но не вставляется в DOM автоматически. Этот режим полезен, если требуется обработка HTML вручную перед вставкой.

    up.navigate('/data', { target: '#content', mode: 'none' }).then(result => {
    processHTML(result.responseText);
});

Атрибуты для управления режимами

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

  • up-target — CSS-селектор контейнера для обновления.
  • up-mode — режим вставки (replace, insert, append, prepend, swap, none).
  • up-transition — название анимации, которая будет применяться при обновлении контейнера.
  • up-insert — позиция вставки при использовании insert (top, bottom, before, after).

Пример кнопки, подгружающей новый контент с анимацией:

<button 
    up-target="#content" 
    up-mode="replace" 
    up-transition="fade">
    Обновить
</button>

Комбинация режимов и переходов

Режимы обновления тесно связаны с анимационными переходами (up-transition). Например, режим swap позволяет анимировать удаление старого содержимого и появление нового:

up.navigate('/dashboard', { target: '#main', mode: 'swap', transition: 'slide' });

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

Принципы выбора режима

  • replace — когда требуется полная замена содержимого.
  • insert / append / prepend — для добавления элементов к существующему списку.
  • swap — когда важны плавные анимации замены.
  • none — когда требуется контроль над вставкой HTML вручную или обработка данных перед отображением.

Особенности работы с вложенными контейнерами

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

<div id="dashboard">
    <div id="stats" up-target="#stats"></div>
    <div id="notifications" up-target="#notifications"></div>
</div>

При вызове:

up.navigate('/stats', { target: '#stats', mode: 'replace' });

обновится только блок #stats, оставляя уведомления нетронутыми.

Жизненный цикл при обновлении

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

  • up:before-update — перед началом вставки контента.
  • up:before-replace / up:before-insert — перед конкретным типом обновления.
  • up:replace / up:insert — непосредственно после вставки.
  • up:after-update — финальная точка после завершения всех операций.

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

Практические советы

  • Для списков и таблиц предпочтительнее insert, append или prepend, чтобы избежать полной перезагрузки.
  • Для панелей или карточек интерфейса лучше использовать replace или swap, особенно если требуется анимация.
  • Всегда явно указывать target, чтобы обновление не затронуло случайные элементы страницы.
  • Комбинация mode и transition позволяет создавать визуально богатые интерфейсы без избыточного JavaScript.

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

Оглавление