HX-Триггеры для ответов

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

Заголовки:

HX-Trigger - запускают события, как только ответ получен.
HX-Trigger-After-Settle - запускают события после шага обработки.
HX-Trigger-After-Swap - запускают события после шага обмена.

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

HX-Trigger: myEvent

Это запустит myEvent на элементе, по которому сработало событие, и оно будет распространено до тела документа. Например, вы можете прослушать это событие следующим образом:

document.body.addEventListener("myEvent", function(evt){
alert("myEvent was triggered!");
})

… или так, если вы хотите запустить действие на элементе без использования кода JavaScript:

<!-- Since it bubbles up to the <body>, we must use the `from:body` modifier below -->
<div hx-trigger="myEvent from:body" hx-get="/example"></div>

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

HX-Trigger: {"showMessage":"Here Is A Message"}

Для обработки этого события необходимо написать следующий код:

document.body.addEventListener("showMessage", function(evt){
alert(evt.detail.value);
})

Обратите внимание, что значение сообщения было помещено в detail.value слот. Если вы хотите передать несколько данных, вы можете использовать вложенный JSON-объект в правой части JSON-объекта:

HX-Trigger: {"showMessage":{"level" : "info", "message" : "Here Is A Message"}}

И обработать это событие следующим образом:

document.body.addEventListener("showMessage", function(evt){
if(evt.detail.level === "info"){
alert(evt.detail.message);   
   }
})

Каждая свойство JSON-объекта справа будет скопирована в объект details события.

Множественные триггеры

Если вы хотите вызвать несколько событий, вы можете просто добавить дополнительные свойства к основному JSON-объекту:

HX-Trigger: {"event1":"A message", "event2":"Another message"}

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

HX-Trigger: event1, event2

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

Licensed under the Zero-Clause BSD License.
https://htmx.org/headers/hx-trigger/