【发布时间】：2021-11-30 21:57:32
【问题描述】：
此代码不会触发交换事件，即使我可以看到 afterSettle 事件正在控制台中触发。
<div id="product-gallery" hx-trigger="htmx:afterSettle" hx-get="{% url 'products' %}" hx-swap="outerHTML">
这可行，但当然会永远循环，使用：
<div id="product-gallery" hx-trigger="load" hx-get="{% url 'products' %}" hx-swap="outerHTML">
我可以从 htmx.logAll() 看到 htmx:afterSettle 甚至正在触发，它只是没有触发上述元素。也试过htmx:afterSwap，也是logAll()记录的
我正在尝试在换出表单后重新加载图库（该表单位于此父产品图库 div 中）。我希望我可以通过添加一个 from 约束来实现：
<div id="product-gallery" hx-get="{% url 'products' %}" hx-swap="outerHTML" hx-trigger="afterSettle from:.product-form">
结构是：
<div id="product-gallery">
<div id="product-form-1">
<form>
...
</form>
</div>
...
</div>
更新 - 它有效！遵循https://htmx.org/examples/update-other-content/ 的解决方案 3： 我在表单更新视图中为我的响应添加了一个标题：
if form.is_valid():
form.save()
context = dict()
context['form'] = form
response = render(self.request, 'form_product.html', context)
response['HX-Trigger'] = 'productUpdate'
return response
然后我在画廊 div 中监听这个事件：
<div id="product-gallery" hx-get="{% url 'products' %}" hx-swap="outerHTML" hx-trigger="productUpdate from:body">
我保留的一点js是在表单有效时关闭它们：
htmx.on("htmx:afterSwap", function(evt) {
const eventIdTarget = evt['target'].id;
if (eventIdTarget === 'product-gallery') {
if ($("[id^=product-form] .alert-warning").length === 0) {
$.magnificPopup.close();
}
}
})
【问题讨论】：
-
请从高层次的角度解释你的用例。示例：初始页面包含一个画廊和 foo。用户点击 bar，然后 xyz 发生。那么......应该改变。
-
@guettli 我正在尝试在其中一个表单从服务器成功返回后更新表单库。这就是为什么我试图在 afterSettle 触发 - 我想在从服务器返回的表单之后更新画廊，而不是提交给它。这很重要，因为返回的表单可以更改，并且在图库中按字母顺序第二次表示为带有一些悬停文本的缩略图。所以每次返回新表单时，我都必须更新图库。
-
请更新问题。评论中的文字很难阅读。您可以将枚举列表用于这些步骤。
-
谢谢 - 我想我现在开始明白了。我最喜欢解决方案 3（事件驱动）。原因是这是一个 django 应用程序，我不想以破坏 django 规范的方式来混淆我的观点的响应。
标签： htmx