Замена без навигации

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

Ключевым понятием является целевая область (target), в которую вставляется полученный HTML. Любой вызов замены — это комбинация URL запроса, селектора цели и опций анимации.

Замена содержимого через up.replace()

Метод up.replace() выполняет асинхронный HTTP-запрос и обновляет указанный фрагмент страницы.

Синтаксис:

up.replace(url, target, options)
  • url — адрес ресурса для загрузки.
  • target — CSS-селектор элемента, который будет заменён.
  • options — объект с настройками запроса и анимации.

Пример:

up.replace('/users/42', '#profile', { animation: 'fade' });

Этот код загружает HTML с /users/42 и плавно заменяет содержимое элемента с id profile.

Основные возможности options:

  • animation — тип анимации (fade, slide, none).
  • scroll — прокрутка к элементу после замены (true, селектор или координата).
  • focus — установка фокуса на элемент после вставки.
  • history — управление историей браузера (true добавляет запись).

Обработка форм без перезагрузки

Unpoly автоматически интегрируется с формами, позволяя отправлять их через AJAX без полной навигации. Для этого используется up.submit():

up.submit(form, target, options)
  • form — элемент формы или селектор.
  • target — элемент для замены содержимого.
  • options — аналогично up.replace().

Пример:

up.submit('#edit-user-form', '#profile', { animation: 'slide' });

Форма будет отправлена асинхронно, а возвращённый HTML заменит содержимое #profile с анимацией скольжения.

Unpoly автоматически управляет статусом кнопок отправки, показывает ошибки и позволяет вставлять фрагменты ответа в указанные области через атрибут up-target.

Атрибуты HTML для замены

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

  • up-target — задаёт элемент для замены.
  • up-method — HTTP-метод (GET, POST).
  • up-transition — анимация при вставке.
  • up-swap — стратегия вставки: replace, before, after, prepend, append.
  • up-confirm — текст подтверждения перед выполнением действия.

Пример кнопки:

<button 
  up-target="#comments" 
  up-swap="prepend" 
  up-transition="fade"
  up-method="POST"
  up-confirm="Добавить комментарий?">
  Добавить комментарий
</button>

При клике комментарий будет добавлен в начало контейнера #comments с плавным эффектом.

Управление историей

При замене фрагментов Unpoly автоматически обновляет историю браузера, что позволяет использовать кнопки “Назад” и “Вперед”. Встроенные события:

  • up:request — перед отправкой запроса.
  • up:success — при успешной замене.
  • up:failure — при ошибке запроса.
  • up:layer:opened / up:layer:closed — для работы с модальными слоями.

Пример с отслеживанием события:

up.on('up:success', '#profile', function(event) {
  console.log('Профиль обновлён:', event.target);
});

Анимации и плавная вставка

Unpoly поддерживает несколько встроенных анимаций:

  • fade — плавное появление.
  • slide — скольжение вверх/вниз.
  • cross-fade — одновременное исчезновение старого и появление нового содержимого.

Анимации можно комбинировать с опциями scroll и focus для создания интуитивного интерфейса. Например:

up.replace('/dashboard', '#main', { animation: 'cross-fade', scroll: '#top', focus: true });

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

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

up.replace('/users/42 #contact-info', '#contact-info');

В этом случае из ответа будет извлечён только блок #contact-info и вставлен в одноимённый элемент на странице.

Встраивание в SPA и модальные слои

Unpoly предоставляет слои (layers), которые позволяют отображать содержимое поверх страницы без замены основного контента. Это полезно для модальных окон, всплывающих форм и диалогов.

up.layer.open('/users/42/edit', { animation: 'slide' });

Содержимое загрузится в отдельный слой, который можно закрывать, не влияя на основной DOM.

События для динамических интерфейсов

Система событий Unpoly позволяет реагировать на каждую фазу загрузки:

  • up:loading — начинается запрос.
  • up:loaded — контент загружен в DOM.
  • up:inserted — новый элемент вставлен и виден.
  • up:removed — элемент удалён.

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

up.on('up:inserted', '#messages', function(event) {
  event.target.scrollTop = event.target.scrollHeight;
});

Принципы производительности

Unpoly оптимизирован для минимизации операций с DOM. Основные подходы:

  • Избирательная замена — обновляются только указанные элементы.
  • Кэширование фрагментов — повторные запросы могут использовать закэшированный HTML.
  • Асинхронные запросы — не блокируют интерфейс.

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

Оглавление