hx-select-oob
hx-select-oob
属性允许您从响应中选择内容,并通过带外交换将其替换。
此属性的值是一个以逗号分隔的元素列表,用于在带外进行交换。此属性几乎总是与 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
策略。
例如,要将警报内容追加而不是替换,可以使用以下代码:
<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
是继承的,可以放在父元素上。