更新其他内容

人们第一次使用 htmx 时经常会出现的一个问题是：

我需要更新屏幕上的其他内容。我该怎么做？

有多种方法可以做到这一点，在这个例子中，我们将向你介绍其中的一些方法。

我们将使用以下基本 UI 来讨论这个概念：一个简单的联系人表，以及它下面的一个表单，使用 hx-post 向表中添加新联系人。

<h2>Contacts</h2>
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="contacts-table">
    ...
  </tbody>
</table>
<h2>Add A Contact</h2>
<form hx-post="/contacts">
  <label>
    Name
        <input name="name" type="text">  
  </label>
  <label>
    Email
        <input name="email" type="email">  
  </label>
</form>

这里的问题是，当你在表单中提交新联系人时，你希望上面的联系人表刷新并包含表单刚刚添加的联系人。

我们有什么解决方案？

解决方案 1：扩大目标

这里最简单的解决方案是“扩展表单的目标”，以将表格和表单都包含进去。例如：你可以将整个内容包装在一个 div 中，然后以 div 为目标：

<div id="table-and-form">
    <h2>Contacts</h2>
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="contacts-table">
        ...
      </tbody>
    </table>
    <h2>Add A Contact</h2>
    <form hx-post="/contacts" hx-target="#table-and-form">
      <label>
        Name
            <input name="name" type="text">  
      </label>
      <label>
        Email
            <input name="email" type="email">  
      </label>
    </form>
</div>

请注意，我们使用 hx-target 属性定位 div 。你需要在对 POST 到 /contacts 的响应中同时渲染表格和表单。

这是一种简单而可靠的方法，尽管它可能感觉不是特别优雅。

解决方案 2：带外响应

解决这个问题的更复杂的方法是使用带外交换将更新的内容交换到 DOM。

使用这种方法，HTML 根本不需要改变原始设置：

<h2>Contacts</h2>
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="contacts-table">
    ...
  </tbody>
</table>
<h2>Add A Contact</h2>
<form hx-post="/contacts">
  <label>
    Name
        <input name="name" type="text">  
  </label>
  <label>
    Email
        <input name="email" type="email">  
  </label>
</form>

你不需要修改前端的某些内容，而是在 POST 到 /contacts 响应中包含一些额外的内容：

<tbody hx-swap-oob="beforeend:#contacts-table">
  <tr>
    <td>Joe Smith</td>
    <td>[email protected]</td>
  </tr>
</tbody>

<label>
  Name
      <input name="name" type="text">
</label>
<label>
  Email
      <input name="email" type="email">
</label>

该内容使用 hx-swap-oob 属性将自身附加到 #contacts-table，并在成功添加联系人后更新表。

解决方案 3：触发事件

更复杂的方法是在成功创建联系人时触发客户端事件，然后在表上监听该事件，从而实现表格刷新。

<h2>Contacts</h2>
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="contacts-table" hx-get="/contacts/table" hx-trigger="newContact from:body">
    ...
  </tbody>
</table>
<h2>Add A Contact</h2>
<form hx-post="/contacts">
  <label>
    Name
        <input name="name" type="text">  
  </label>
  <label>
    Email
        <input name="email" type="email">  
  </label>
</form>

我们添加了一个重新呈现联系人表的链接 /contacts/table。此请求的触发器是一个自定义事件 newContact 。我们在上监听此事件，body 因为当它由对表单的响应触发时，它最终会由于事件冒泡而命中主体。

当向 /contacts POST 过程中成功创建联系人时，响应包含如下所示的 HX-Trigger 响应头：

HX-Trigger:newContact

这将触发表发出一个GET 到 /contacts/table，并且将呈现新添加的联系人行（除了表的其余部分）。

非常干净，事件驱动编程！

解决方案 4：使用路径依赖项扩展

最后一种方法是使用 REST-ful 路径依赖关系来刷新表格。Intercooler.js（htmx 的前身）已将基于路径的依赖关系集成到库中。

htmx 将其作为核心功能删除，但支持 path-deps 扩展，可为你提供类似的功能。

更新我们的示例以使用扩展将涉及加载扩展 javascript，然后像这样解析我们的 HTML：

<h2>Contacts</h2>
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="contacts-table" hx-get="/contacts/table" hx-ext="path-deps"  hx-trigger="path-deps" path-deps="/contacts">
    ...
  </tbody>
</table>
<h2>Add A Contact</h2>
<form hx-post="/contacts">
  <label>
    Name
        <input name="name" type="text">  
  </label>
  <label>
    Email
        <input name="email" type="email">  
  </label>
</form>

现在，当表单 post 到 /contacts URL 时，path-deps 扩展程序将检测到并在联系人表上触发 path-deps 事件，从而触发请求。

这样做的好处是，你不需要对响应标头进行任何花哨的操作。缺点是，POST 即使未成功创建联系人也会发出请求。

我应该使用哪一个？

一般来说，我建议采用第一种方法，扩大目标，尤其是当需要更新的元素在 DOM 中彼此相当接近时。这种方法简单可靠。

之后，我会说在自定义事件和 OOB 交换方法之间犹豫不决。我倾向于自定义事件方法，因为我喜欢面向事件的系统，但这是个人偏好。选择哪一种方法应取决于你自己的软件工程品味，以及两者中的哪一种更符合你选择的服务器端技术。

最后，path-deps 方法很有趣，如果它与你的思维模型和整体系统架构非常契合，那么它可以成为一种避免显式刷新的有趣方法。不过，除非这个概念真的吸引你，否则我会最后考虑它。