hx-swap-oob

hx-swap-oob 属性允许您指定响应中的某些内容应被交换到 DOM 中的目标位置之外，即“带外”。这使您能够将其他元素更新的更新附加到响应中。

请考虑以下响应 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>

请注意，这些模板标签将从页面的最终内容中删除。

滑溜溜的 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-swap 目标，以及作为更大片段的一部分。当更大的片段是主响应时，内部片段仍将被处理为 oob 交换，将其从 dom 中移除。

可以通过将配置 htmx.config.allowNestedOobSwaps 设置为 false 来更改此行为。如果此配置选项为 false，则仅当元素与主响应元素相邻时才会处理 OOB 交换，其他地方的 OOB 交换将被忽略，并且与 oob-swap 相关的属性将被剥离。

笔记