Использование для состояния

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

История и URL

Unpoly автоматически интегрируется с историей браузера. Любое изменение содержимого фрагмента страницы может быть отражено в URL, что обеспечивает корректную работу кнопок «Назад» и «Вперёд».

Ключевые моменты:

  • up.target определяет элемент, в который будет загружено новое содержимое.
  • up.render используется для программного обновления содержимого.
  • Параметр push управляет записью состояния в историю.

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

up.render('#content', '/new_page', { push: true });

Здесь #content — целевой контейнер, /new_page — URL, который отобразится в адресной строке, а push: true добавляет новое состояние в историю.

Объекты состояния

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

up.state.set({ filter: 'active', page: 2 });
  • up.state.get() возвращает текущее состояние.
  • up.state.on('change', callback) позволяет реагировать на любые изменения состояния.

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

up.state.on('change', function(event) {
  console.log('Новое состояние:', event.state);
});

Управление фрагментами и параметрами

Unpoly позволяет загружать отдельные фрагменты страницы, сохраняя параметры состояния:

up.render('#list', '/items', { params: { category: 'books' }, push: true });
  • params добавляет параметры к URL и к объекту состояния.
  • Использование push: true позволяет сохранить переход в истории.

Асинхронное обновление и отмена

В Unpoly доступна функциональность отмены предыдущих запросов при быстром переходе между состояниями. Методы up.abort() и up.fragment.abort() позволяют предотвращать конфликтующие загрузки.

Пример:

let request = up.render('#content', '/search', { params: { q: 'unpoly' } });

// При необходимости отменить
request.abort();

Работа с формами и состоянием

Unpoly интегрирует формы с объектом состояния. При отправке формы:

up.submit('#search-form', { push: true });
  • Параметры формы автоматически добавляются в URL.
  • История браузера обновляется, и состояние сохраняется.
  • Фрагмент страницы, связанный с формой, обновляется без перезагрузки всей страницы.

Взаимодействие с событиями состояния

Unpoly предоставляет набор событий, связанных с состоянием:

  • up:popstate — вызывается при переходе назад или вперёд в истории.
  • up:fragment:load — после загрузки нового фрагмента.
  • up:state:change — при изменении состояния.

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

document.addEventListener('up:popstate', function(event) {
  console.log('Пользователь вернулся к предыдущему состоянию:', event.state);
});

Поддержка сложных сценариев

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

up.render([
  { target: '#list', url: '/items', params: { category: 'books' } },
  { target: '#sidebar', url: '/filters', params: { category: 'books' } }
], { push: true });
  • Один вызов up.render обновляет несколько фрагментов.
  • Состояние каждого фрагмента учитывается при управлении историей и URL.
  • Объединение параметров в объект состояния позволяет легко сохранять текущий контекст интерфейса.

Динамическая модификация состояния

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

up.state.set({ sort: 'asc' }, { push: true });
  • Позволяет обновлять URL и историю без обновления содержимого.
  • Удобно для фильтров, сортировок и других динамических элементов интерфейса.

Итоговое управление состоянием

Механизм состояния в Unpoly обеспечивает:

  • Согласованность URL и истории браузера с текущим содержимым страницы.
  • Управление динамическими фрагментами без перезагрузки.
  • Возможность отслеживания и восстановления состояния интерфейса.
  • Интеграцию с формами и асинхронными запросами.

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

Оглавление