HTMX入門

minegishirei.hatenablog.com

Events＆Logging

HTMXには、ロギングシステムを兼ねる広範なイベントシステムがあります。例えば、特定のHTMXイベントの監視登録する場合は、以下のようにaddEventListenerを活用することでhtmxの活動を監視することができます。

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

または、あなたが望む場合は、次のHTMXヘルパーを使用できます。

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

htmx:load イベントは、要素がHTMXによってDOMにロードされるたびに起動されます。負荷はかかりますが、デバッグに便利です。

HTMXイベントのいくつかの一般的な用途は次のとおりです。

イベントを使用してサードパーティライブラリをイネ化します

htmx.onload を使用してコンテンツを初期化することよくあることなので、HTMXはヘルパー関数を提供します。

htmx.onLoad(function(target) {
    yourJavascriptLib.init(target.detail.elt)
});

これは最初の例と同じことをしますが、少しきれいに書けます。

configureイベントを使用したリクエスト

htmx.configRequestイベントを使用して、AJAXリクエストを発行する前に設定の変更ができます。

document.body.addEventListener('htmx:configRequest', function(evt) {
    evt.detail.parameters['auth_token'] = getAuthToken(); // add a new parameter into the request
    evt.detail.headers['Authentication-Token'] = getAuthToken(); // add a new header into the request
});

ここでは、送信前にパラメーターとヘッダーをリクエストに追加します。

htmxでサーバーからのjsonレスポンスを修正する

htmx:beforeswap イベントで、サーバーからのjsonレスポンスを処理できます。

document.body.addEventListener('htmx:beforeSwap', function(evt) {
    if(evt.detail.xhr.status === 404){
        // 404エラーが起きたときの対応
        alert("Error: Could Not Find Resource");
    } else if(evt.detail.xhr.status === 422){
        // 422エラーが起きたときの対応
        evt.detail.shouldSwap = true;
        evt.detail.isError = false;
    } else if(evt.detail.xhr.status === 418){
        // 418エラーが起きたときの対応
        evt.detail.shouldSwap = true;
        evt.detail.target = htmx.find("#teapot");
    }
});

ここでは、いくつかの400レベルのエラー応答コードを処理します。または、beforeSwapの処理の過程でJsonレスポンスをhtmlレスポンスに変えることもできます。

Eventネーミング

すべてのイベントは次の2つの異なる名前で起動されていることに注意してください

キャメルケース (afterSwapなど大文字小文字でつなげる)
ケバブケース (after-swapなど-つながり)

したがって、たとえば、htmx：afterswapまたはhtmx：after-swapイベントをリッスンすることができます。これにより、他のライブラリと相互運用性が促進されます。たとえば、Alpine.jsにはKebabケースが必要です。

page:https://minegishirei.hatenablog.com/entry/2024/05/23/181747

プログラミング学習サイト

プログラミングの学習を開始される方を対象としたプログラミング入門サイトです。

HTMXによるイベント管理