同步
通常,你希望在两个元素之间协调请求。例如,你可能希望来自一个元素的请求取代另一个元素的请求,或者等待另一个元素的请求完成。
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 的示例和详细信息。