HX-Trigger

Основное использование

Отправка одного события:

HX-Trigger: myEvent

По умолчанию событие отправляется с элемента, который выполнил запрос, и всплывает. Используйте from:body, если слушаете событие в другом месте.

Слушайте событие из разметки с помощью hx-on:

<div hx-on="myEvent from:body -> this.classList.add('updated')"></div>

Отправка нескольких событий:

HX-Trigger: event1, event2

Данные события

Передача данных события с помощью объекта JSON:

HX-Trigger: {"notification":"Hello World"}

Скалярные значения доступны в detail.value:

<div hx-on="notification from:body -> alert(value)"></div>

Также можно слушать события из JavaScript:

document.body.addEventListener("notification", (evt) => {
    alert(evt.detail.value); // "Hello World"
});

Передача нескольких полей данных события с помощью вложенного объекта:

HX-Trigger: {"notification":{"level":"info", "message":"Saved"}}

Каждое вложенное свойство копируется в данные события:

<div hx-on="notification from:body -> this.dataset.level = level; this.textContent = message"></div>

Чтобы отправить несколько событий с данными, добавьте свойства в объект JSON верхнего уровня:

HX-Trigger: {"notification":"Saved", "refreshList":true}

<div hx-on="notification from:body -> this.textContent = value;
            refreshList from:body -> this.dataset.refresh = value"></div>

Выбор других элементов

Запустите событие на другом элементе с помощью target:

HX-Trigger: {"notification":{"target":"#notifications", "message":"Saved"}}

Значение target интерпретируется как селектор. Событие отправляется на этот элемент, а не на исходный.

<div id="notifications" hx-on="notification -> this.textContent = message"></div>

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

HX-Trigger: {"cartUpdated":{"target":"#cart", "count":3}}

<div id="cart" data-count="0" hx-on="cartUpdated -> data.count = count">
    Cart (<span :text="data.count"></span>)
</div>

В этом примере используется расширение hx-live.

Примечания

Заголовки ответа не обрабатываются для ответов с кодами 3xx. При использовании этого заголовка возвращайте статус 2xx.

В htmx 2 было три варианта: HX-Trigger, HX-Trigger-After-Swap и HX-Trigger-After-Settle. В htmx 4 они были объединены в один заголовок HX-Trigger, который срабатывает после завершения подмены.

См. также

• htmx.trigger()