同步

通常,你希望在两个元素之间协调请求。例如,你可能希望来自一个元素的请求取代另一个元素的请求,或者等待另一个元素的请求完成。

htmx 提供了一个 hx-sync 属性来帮助你实现这一点。

考虑此 HTML 中表单提交和单个输入的验证请求之间的争用条件:

<form hx-post="/store">
    <input id="title" name="title" type="text"
        hx-post="/validate"
        hx-trigger="change"
    >
    <button type="submit">Submit</button>
</form>

如果不使用 hx-sync,则填写输入并立即提交表单会触发对 /validate 和 /store 的两个并行请求。

在输入上使用 hx-sync=“closest form:abort” 将监视表单上的请求,如果存在表单请求或在输入请求正在进行时启动,则中止输入的请求:

<form hx-post="/store">
    <input id="title" name="title" type="text"
        hx-post="/validate"
        hx-trigger="change"
        hx-sync="closest form:abort"
    >
    <button type="submit">Submit</button>
</form>

这以声明的方式解决了两个元素之间的同步问题。

htmx 还支持以 javascript 编程方式取消请求:你可以将 htmx:abort 事件发送到元素以取消任何正在进行的请求:

<button id="request-button" hx-post="/example">
    Issue Request
</button>
<button onclick="htmx.trigger('#request-button', 'htmx:abort')">
    Cancel Request
</button>

可以在属性页面上找到更多 hx-sync 的示例和详细信息。