Динамические списки

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

Инициализация и подключение

Для использования Unpoly необходимо подключить его CSS и JS:

<link rel="stylesheet" href="https://unpkg.com/unpoly/dist/unpoly.min.css">
<script src="https://unpkg.com/unpoly/dist/unpoly.min.js"></script>

После подключения библиотека автоматически отслеживает клики по ссылкам и сабмиты форм, которые содержат атрибуты up-target и up-url.

Основные атрибуты для динамических списков

  • up-target — указывает CSS-селектор элемента, который будет заменён содержимым ответа.
  • up-url — определяет адрес, с которого загружается новый контент.
  • up-swap — задаёт способ замены содержимого: replace, after, before, append, prepend.

Пример базового списка с кнопкой для подгрузки новых элементов:

<ul id="item-list">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
</ul>

<button 
  up-target="#item-list" 
  up-url="/items/next" 
  up-swap="append">
  Показать ещё
</button>

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

Подгрузка элементов через AJAX

Unpoly упрощает работу с AJAX. Любой элемент с up-url автоматически выполняет запрос, а полученный HTML заменяет или дополняет указанный up-target. Для динамических списков важно:

  1. Использовать уникальные идентификаторы элементов, чтобы Unpoly мог корректно обновлять их.
  2. Минимизировать повторяющиеся элементы, особенно при up-swap="replace", чтобы не дублировать контент.

Пример обновления списка по клику на ссылку:

<a href="/items/page/2" up-target="#item-list" up-swap="replace">Следующая страница</a>

Сервер возвращает HTML, содержащий <li> элементы, которые заменят текущий список.

Фильтрация и сортировка динамических списков

Формы фильтрации легко интегрируются с Unpoly:

<form up-target="#item-list" up-url="/items/filter">
  <select name="category">
    <option value="all">Все</option>
    <option value="books">Книги</option>
    <option value="movies">Фильмы</option>
  </select>
  <button type="submit">Применить</button>
</form>

При изменении категории Unpoly отправит AJAX-запрос на /items/filter, а возвращённые <li> элементы заменят содержимое #item-list.

Для сортировки достаточно добавить параметры в ссылку или форму:

<a href="/items?sort=name" up-target="#item-list" up-swap="replace">По имени</a>
<a href="/items?sort=date" up-target="#item-list" up-swap="replace">По дате</a>

Поддержка событий и обратных вызовов

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

  • up:fragment:loaded — срабатывает после подгрузки нового фрагмента.
  • up:fragment:replaced — после замены содержимого.
  • up:click и up:submit — перед выполнением действий по клику или сабмиту.

Пример обработки события для анимации добавления элементов:

up.on('up:fragment:replaced', '#item-list', function(event) {
  const newItems = event.fragment.querySelectorAll('li');
  newItems.forEach(item => {
    item.classList.add('fade-in');
  });
});

Использование up-append и up-prepend

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

<button 
  up-url="/items/latest" 
  up-target="#item-list" 
  up-swap="prepend">
  Новые элементы
</button>

<button 
  up-url="/items/older" 
  up-target="#item-list" 
  up-swap="append">
  Старые элементы
</button>

prepend добавляет элементы в начало списка, а append — в конец. Это удобно для лент новостей и чат-списков.

Работа с формами внутри списков

Если каждый элемент списка содержит форму (например, для голосования), Unpoly обеспечивает плавное обновление конкретного элемента:

<li id="item-1">
  <span>Элемент 1</span>
  <form up-target="#item-1" up-url="/vote/1">
    <button type="submit">Голосовать</button>
  </form>
</li>

После отправки формы только <li> с id="item-1" обновится, остальные элементы останутся нетронутыми.

Использование шаблонов и фрагментов

Для удобства сервер может возвращать фрагменты HTML, содержащие только <li> элементы, без обёртки <ul>. Unpoly корректно вставит их в указанный up-target.

Пример фрагмента:

<li>Новый элемент 3</li>
<li>Новый элемент 4</li>

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

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

Атрибуты для контроля истории:

  • up-history="push" — добавляет изменение в историю.
  • up-history="replace" — заменяет текущее состояние, не добавляя новую запись.

Пример пагинации с историей:

<a href="/items/page/3" up-target="#item-list" up-swap="replace" up-history="push">Страница 3</a>

Адаптивность и прогрессивное улучшение

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

Резюме по использованию динамических списков

  • Использовать up-target и up-url для обновления частей страницы.
  • Управлять вставкой элементов через up-swap: replace, append, prepend.
  • Интегрировать формы и фильтры для динамической подгрузки данных.
  • Применять события Unpoly для анимации, отслеживания изменений и сложной логики.
  • Контролировать историю браузера с помощью up-history.

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

Оглавление