このガイドの目的は、htmx における「Hotwire 相当」の機能に関する一般的なプラクティスを提供することです。
<body hx-boost="true"> を使用します。参照: hx-boosthx-boost は引き続き機能します。参照: プログレッシブエンハンスメントhx-boost="false" は data-turbo="false" と同等であり、特定のリンクまたはフォームでブーストを無効にするために使用されます。参照: ハンドブックhx-target="body" hx-swap="outerHTML" hx-push-url="true" 参照: ハンドブック<form> は無効化されたフィールドを送信しないため、ボタンのみを無効にします。参照: MDN: disabledaddEventListener("submit", (event) => {
event.target.querySelectorAll("button").forEach(node => { node.disabled = true })
})
addEventListener("htmx:afterOnLoad", (event) => {
event.target.querySelectorAll("button").forEach(node => { node.disabled = false })
})
hx-on:submit= 'event.target.querySelectorAll("button").forEach(node => { node.disabled = true })'hx-on:htmx:afterOnLoad= 'event.target.querySelectorAll("button").forEach(node => { node.disabled = false })'_="on submit toggle @disabled <button/> in me until htmx:afterOnLoad" 参照: クックブック<turbo-frame> は不要です。hx-trigger="load, submit" 参照: ハンドブック<turbo-stream> も <template> も不要です。<turbo-frame> .. </turbo-frame> 内にラップされているもののみを更新します。htmx:config-request は turbo:before-fetch-request と同等です。参照: ハンドブックhtmx:config-request は htmx:configRequest と同じです。参照: イベント命名document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['Authorization'] = `Bearer ${token}`
})
hx-trigger="submit[action(target)]"hx-on:click="event.preventDefault(); action(this); htmx.trigger(this, 'ready')" hx-trigger="ready"_="on submit halt the event action(target) trigger ready" hx-trigger="ready"fetch などの非同期呼び出しを解決します。参照: 非同期透過性