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>

注意事項