События и логирование

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

Если вы хотите зарегистрировать обработчик для определённого события htmx, вы можете использовать:

document.body.addEventListener('htmx:load', function(evt) {
  myJavascriptLib.init(evt.detail.elt);
});

или, если предпочитаете, можете использовать следующий хелпер htmx:

htmx.on("htmx:load", function(evt) {
  myJavascriptLib.init(evt.detail.elt);
});

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

Некоторые распространённые применения событий htmx:

Инициализация сторонней библиотеки с помощью событий

Использование события htmx:load для инициализации контента настолько распространено, что htmx предоставляет вспомогательную функцию:

htmx.onLoad(function(target) {
  myJavascriptLib.init(target);
});

Это делает то же самое, что и первый пример, но выглядит немного чище.

Настройка запроса с помощью событий

Вы можете обработать событие htmx:configRequest, чтобы изменить AJAX-запрос перед его отправкой:

document.body.addEventListener('htmx:configRequest', function(evt) {
  evt.detail.parameters['auth_token'] = getAuthToken(); // добавляем новый параметр в запрос
  evt.detail.headers['Authentication-Token'] = getAuthToken(); // добавляем новый заголовок в запрос
});

Здесь мы добавляем параметр и заголовок к запросу перед его отправкой.

Изменение поведения обмена с помощью событий

Вы можете обработать событие htmx:beforeSwap, чтобы изменить поведение обмена в htmx:

document.body.addEventListener('htmx:beforeSwap', function(evt) {
  if(evt.detail.xhr.status === 404){
    // уведомляет пользователя при возникновении ошибки 404 (попробуйте использовать более удобный механизм, чем alert())
    alert("Ошибка: Ресурс не найден");
  } else if(evt.detail.xhr.status === 422){
    // позволяет выполнять обмен для ответов с кодом 422, так как мы используем это как сигнал о том,
    // что форма была отправлена с некорректными данными, и хотим перерисовать с ошибками
    //
    // устанавливаем isError в false, чтобы избежать логирования ошибки в консоли
    evt.detail.shouldSwap = true;
    evt.detail.isError = false;
  } else if(evt.detail.xhr.status === 418){
    // если возвращается код ответа 418 (Я чайник), перенаправляем содержимое ответа
    // на элемент с идентификатором `teapot`
    evt.detail.shouldSwap = true;
    evt.detail.target = htmx.find("#teapot");
  }
});

Здесь мы обрабатываем несколько кодов ошибок 400-го уровня, которые обычно не выполняют обмен в htmx.

Именование событий

Обратите внимание, что все события срабатывают с двумя разными именами:

• Верблюжий регистр (Camel Case)
• Кебаб-регистр (Kebab Case)

Например, вы можете слушать htmx:afterSwap или htmx:after-swap. Это облегчает совместимость с другими библиотеками. Например, Alpine.js требует использования кебаб-регистра.

Логирование

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

htmx.logger = function(elt, event, data) {
  if(console) {
    console.log(event, elt, data);
  }
}