Day9 - HTMX hx-swap-oob - 更複雜的渲染方式

Genos
2023-09-24 23:59:23

hx-swap-oob 屬性可以設置在 AJAX 的回應中，把回應的內容渲染到額外指定的 ID 元素上（Out of Band），以下是簡單範例：



    Specified Content...


    Response Content...


在上方的回應中，div#message 會被直接渲染到對應相同 ID 的 DOM 元素中，而其他不在 div#message 元素中的內容會按照正常方式渲染到對應的元素

可以利用這種方式夾帶其他請求的更新

請注意，帶有 hx-swap-oob 的元素必須放於回應內容的最上層，而不是最上層元素的子元素

hx-swap-oob 可以設定的值：

true

任何有效的 hx-swap 值

任何有效的 hx-swap 值 ＋ 冒號 + CSS 選擇器

如果值為 true 或 outerHTML（相同效果），則元素將用內嵌的方式渲染

如果值帶有 CSS 選擇器，將會渲染到 CSS 選擇器選到的元素
如果值沒有 CSS 選擇器，將會渲染到對應 ID 的元素

參考：https://htmx.org/attributes/hx-swap-oob/