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
任何 hx-swap 有效值
任何 hx-swap 有效值，后跟冒号，后跟 CSS 选择器

如果值为 true 或 outerHTML（等效），则元素将内联交换。

如果给出了交换值，则将使用该交换策略，并且除 outerHTML 之外的所有策略的封装标签对都将被剥离。

如果指定了选择器，则将交换与该选择器匹配的所有元素。如果没有，则将交换 ID 与新内容匹配的元素。

使用替代交换策略

如前所述，当使用除 true 或 outerHTML 之外的交换策略时，封装标签会被剥离，因此你需要使用适合上下文的正确标签来封装返回的数据。

<tr>尝试在使用的表中插入时<tbody>：

<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 目标，也可以作为更大片段的一部分。当较大的 fragment 是主要响应时，内部 fragment 仍将作为 oob swap 处理，将其从 dom 中删除。

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

笔记

hx-swap-oob不会被继承