hx-swap-oob

hx-swap-oob 屬性允許你指定回應中的某些內容應該被交換到 DOM 中，而不是目標位置，也就是「帶外」(Out of Band)。這允許你在回應中捎帶更新其他元素。

考慮以下的回應 HTML：

<div>
 ...
</div>
<div id="alerts" hx-swap-oob="true">
    Saved!
</div>

第一個 div 會以正常方式交換到目標中。然而，第二個 div 會被替換到 id 為 alerts 的元素中，而不會出現在目標中。

hx-swap-oob 的值可以是：

如果值是 true 或 outerHTML（兩者等效），則元素將被內聯交換。

如果給定一個交換值，則將使用該交換策略，並且除了 outerHTML 之外的所有策略都會剝離封裝標籤對。

如果給定選擇器，則將交換該選擇器匹配的所有元素。如果沒有，則將交換 ID 與新內容匹配的元素。

使用替代的交換策略

如先前所述，當使用 true 或 outerHTML 以外的交換策略時，封裝標籤會被剝離，因此您需要使用正確的標籤來封裝返回的資料。

當嘗試在使用了 <tbody> 的表格中插入 <tr> 時

<tbody hx-swap-oob="beforeend:#table tbody">
	<tr>
		...
	</tr>
</tbody>

一個「純」表格

<table hx-swap-oob="beforeend:#table2">
	<tr>
		...
	</tr>
</table>

一個 <li> 可以封裝在 <ul>、<ol>、<div> 或 <span> 中，例如

<ul hx-swap-oob="beforeend:#list1">
	<li>...</li>
</ul>

一個 <p> 可以封裝在 <div> 或 <span> 中

<span hx-swap-oob="beforeend:#text">
	<p>...</p>
</span>

麻煩的表格和列表

請注意，您可以使用 template 標籤來封裝那些在 HTML 規範中不能單獨存在於 DOM 中的元素類型（<tr>、<td>、<th>、<thead>、<tbody>、<tfoot>、<colgroup>、<caption>、<col> & <li>）。

這是一個範例，其中表格列的帶外交換以此方式封裝

<div>
    ...
</div>
<template>
    <tr id="row" hx-swap-oob="true">
        ...
    </tr>
</template>

請注意，這些 template 標籤將從頁面的最終內容中刪除。

滑溜的 SVG

某些元素類型（例如 SVG）會為其子元素使用特定的 XML 名稱空間。這會阻止內部元素在交換時正常運作，除非它們封裝在 svg 標籤內。要修改現有 SVG 的內部內容，您可以使用 template 和 svg 標籤來封裝元素，使其獲得正確的名稱空間。

這是一個範例，其中 svg 元素的帶外交換以此方式封裝

<div>
    ...
</div>
<template><svg>
    <circle hx-swap-oob="true" id="circle1" r="35" cx="50" cy="50" fill="red" /> 
</svg></template>
<template><svg hx-swap-oob="beforebegin:#circle1">
    <circle id="circle2" r="45" cx="50" cy="50" fill="blue" /> 
</svg></template>

這將內聯替換 circle1，然後在 circle1 之前插入 circle2。

請注意，這些 template 和 svg 包裝標籤將從頁面的最終內容中刪除。

巢狀 OOB 交換

預設情況下，回應中任何具有 hx-swap-oob= 屬性的元素都會被處理為 oob 交換行為，包括當元素嵌套在主要回應元素內時。當使用 模板片段 時，這可能會出現問題，因為片段可能會被重複用作 oob 交換目標，也可能作為較大片段的一部分。當較大的片段是主要回應時，內部片段仍會被處理為 oob 交換，從 DOM 中移除它。

可以透過將配置 htmx.config.allowNestedOobSwaps 設定為 false 來更改此行為。如果此配置選項為 false，則僅當元素鄰接主要回應元素時才會處理 OOB 交換，其他位置的 OOB 交換將被忽略並剝離與 oob 交換相關的屬性。

注意事項