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)]"
- 目前无法解析异步调用。查看问题
或者，使用 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: 脚本编写