hx-select-oob
hx-select-oob
屬性允許您從響應中選擇內容,透過帶外交換 (out-of-band swap) 的方式進行替換。
此屬性的值是用逗號分隔的元素列表,這些元素將會進行帶外交換。這個屬性幾乎總是與 hx-select 配對使用。
以下是一個範例,選取了響應內容的一個子集:
<div>
<div id="alert"></div>
<button hx-get="/info"
hx-select="#info-details"
hx-swap="outerHTML"
hx-select-oob="#alert">
Get Info!
</button>
</div>
這個按鈕會向 /info
發出一個 GET
請求,然後選擇 id 為 info-details
的元素,這個元素將會替換 DOM 中整個按鈕。此外,它還會從響應中選取 id 為 alert
的元素,並將其替換到 DOM 中相同 ID 的 div。
在以逗號分隔的值列表中,每個值都可以透過使用 :
分隔選擇器和替換策略,指定任何有效的 hx-swap
策略。
例如,要將 alert 內容添加到現有內容之前,而不是替換它:
<div>
<div id="alert"></div>
<button hx-get="/info"
hx-select="#info-details"
hx-swap="outerHTML"
hx-select-oob="#alert:afterbegin">
Get Info!
</button>
</div>
hx-select-oob
可以被繼承,並且可以放置在父元素上。