События навигации

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

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

Стандартные события навигации

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

up:request-start

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

up.on('up:request-start', function(event) {
  console.log('Запрос начал выполняться', event);
});

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

up:request-end

Событие up:request-end срабатывает после завершения запроса, но до того, как новый контент будет вставлен на страницу. Это событие полезно для выполнения действий, которые должны произойти после того, как данные были получены, но еще до их отображения.

up.on('up:request-end', function(event) {
  console.log('Запрос завершен, данные получены', event);
});

Можно использовать это событие для обработки данных или выполнения дополнительных операций до отображения контента.

up:response

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

up.on('up:response', function(event) {
  console.log('Ответ получен и обработан', event);
});

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

Пользовательские события

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

up:navigation-start

Событие up:navigation-start возникает в момент, когда начинается обработка пользовательского перехода (например, при клике на ссылку или вызове функции навигации). Это событие полезно для анализа переходов и изменения их поведения на основе пользовательских предпочтений.

up.on('up:navigation-start', function(event) {
  console.log('Начался переход', event);
});

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

up:navigation-end

Событие up:navigation-end срабатывает в момент завершения навигации и обновления страницы. После этого события новый контент уже вставлен, и страница готова к использованию.

up.on('up:navigation-end', function(event) {
  console.log('Навигация завершена', event);
});

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

Работа с ошибками при навигации

Unpoly позволяет отслеживать и обрабатывать ошибки, которые могут возникнуть в процессе навигации. Для этого используются события, связанные с ошибками загрузки или выполнения запроса.

up:request-fail

Событие up:request-fail срабатывает в случае, если запрос не был выполнен успешно, например, из-за проблем с сетью или ошибки на сервере. Это событие позволяет обработать ошибку, показать пользователю сообщение или предпринять другие действия, необходимые для восстановления работоспособности приложения.

up.on('up:request-fail', function(event) {
  console.log('Ошибка запроса', event);
  alert('Не удалось загрузить данные');
});

up:response-fail

Событие up:response-fail возникает, если полученный ответ от сервера оказался некорректным или сервер вернул ошибку (например, 404 или 500). В этом случае разработчик может обработать ошибку или перенаправить пользователя на другую страницу.

up.on('up:response-fail', function(event) {
  console.log('Ошибка ответа', event);
  alert('Ошибка загрузки страницы');
});

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

Прерывание и модификация навигации

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

Прерывание навигации

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

up.on('up:navigation-start', function(event) {
  if (!isFormValid()) {
    event.preventDefault();  // Прерывание перехода
    alert('Форма не валидна!');
  }
});

Использование event.preventDefault() позволяет эффективно контролировать поведение навигации.

Изменение навигации

Можно не только останавливать, но и изменять процесс навигации. Например, при условии выполнения определенных действий можно изменить URL или даже загрузить другой контент.

up.on('up:navigation-start', function(event) {
  if (someCondition) {
    event.url = '/alternative-page';  // Изменение URL
  }
});

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

Взаимодействие с сервером

Unpoly упрощает работу с асинхронными запросами к серверу. В процессе навигации часто необходимо работать с сервером, загружая или отправляя данные. Для этого используется событие up:request-start, а также обработчики ошибок, которые позволяют отслеживать статус запроса и состояния сервера.

up.on('up:request-start', function(event) {
  // Пример отправки данных на сервер
  fetch('/api/data', {
    method: 'POST',
    body: JSON.stringify({ key: 'value' }),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(response => response.json())
    .then(data => console.log('Данные отправлены', data))
    .catch(error => console.error('Ошибка отправки данных', error));
});

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

Заключение

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

Оглавление