hx-select-oob

hx-select-oob 属性允许你从响应中选择要通过带外交换进行交换的内容。此属性的值是用逗号分隔的要交换出带外的元素列表。此属性几乎总是与 hx-select 配对。

¥The hx-select-oob attribute allows you to select content from a response to be swapped in via an out-of-band swap.\ The value of this attribute is comma separated list of elements to be swapped out of band. This attribute is almost always paired with hx-select.

以下是选择响应内容子集的示例：

¥Here is an example that selects a subset of the response content:

<div>
   <div id="alert"></div>
    <button hx-get="/info" 
            hx-select="#info-details" 
            hx-swap="outerHTML"
            hx-select-oob="#alert">
        Get Info!
    </button>
</div>

此按钮将发出 GET 到 /info，然后选择 id 为 info-details 的元素，这将替换 DOM 中的整个按钮，此外，在响应中挑选出 id 为 alert 的元素并将其替换为 DOM 中具有相同 ID 的 div。

¥This button will issue a GET to /info and then select the element with the id info-details, which will replace the entire button in the DOM, and, in addition, pick out an element with the id alert in the response and swap it in for div in the DOM with the same ID.

逗号分隔的值列表中的每个值都可以通过使用 : 分隔选择器和交换策略来指定任何有效的 hx-swap 策略。

¥Each value in the comma separated list of values can specify any valid hx-swap strategy by separating the selector and the swap strategy with a :.

例如，要添加警报内容而不是替换它：

¥For example, to prepend the alert content instead of replacing it:

<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>

注释

¥Notes