Hotwire / Turbo ➡️ htmx 遷移指南

本指南旨在提供 htmx 中「Hotwire 等效」功能的常見實踐方法。

htmx 專注於一組透明、高度靈活的 HTML 擴展，使其邏輯最終成為超文本。
Hotwire / Turbo 專注於流暢的開箱即用體驗，但更為主觀且靈活性較低。

#Turbo Drive

<body hx-boost="true"> 啟用類似 Turbo Drive 的體驗。請參閱：hx-boost
與 Turbo Drive 一樣，如果使用者禁用 JavaScript，hx-boost 將繼續運作。請參閱：漸進增強
hx-boost="false" 等同於 data-turbo="false"，用於禁用特定連結或表單上的 boost。請參閱：手冊
表單提交後重定向（302、303、307、3xx）hx-target="body" hx-swap="outerHTML" hx-push-url="true" 請參閱：手冊
在表單提交時禁用按鈕請參閱：手冊
- 僅禁用按鈕，因為 <form> 不會提交禁用的欄位。請參閱：MDN：disabled

addEventListener("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
- 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 })'
或者，可以使用 hyperscript：_="on submit toggle @disabled <button/> in me until htmx:afterOnLoad" 請參閱：食譜

#Turbo Frames

htmx 將所有「Turbo Frames」的概念結合到基本屬性中。不需要 <turbo-frame>。
延遲載入：hx-trigger="load, submit" 請參閱：手冊

#Turbo Streams

htmx 將所有「Turbo Streams」的概念結合到基本屬性中。不需要 <turbo-stream>，也不需要 <template>。
注意：Turbo Streams 可以在頁面上的任何位置執行許多操作（類似於 hx-select-oob 和 hx-swap-oob），而 Turbo Frames 僅更新 <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 條件：hx-trigger="submit[action(target)]"
- 目前無法解析非同步呼叫。請參閱 issue
或者，使用 hx-on：hx-on:click="event.preventDefault(); action(this); htmx.trigger(this, 'ready')" hx-trigger="ready"
或者，使用 hyperscript：_="on submit halt the event action(target) trigger ready" hx-trigger="ready"
- 將解析非同步呼叫，例如 fetch。請參閱：非同步透明度

#Stimulus

hx-on 為各種用例提供了一個內聯的、原生的替代方案。
hyperscript 是 htmx 的一個密切類比和官方配套專案，但這兩個專案完全分開，可以彼此獨立使用，也可以與任何其他函式庫一起使用。
如需其他選項，請參閱：htmx：腳本