1

此代码不会触发交换事件，即使我可以看到 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();
        }
    }
})
4

2 回答 2

1

AFAIK 你不能像这样使用“afterSettle” hx-trigger="htmx:afterSettle"：。

如果要更新页面的第二部分，则可以使用 OOB（带外）：

hx-swap-oob 属性允许您指定响应中的某些内容应交换到目标以外的 DOM 中，即“带外”。这允许您在响应中搭载对其他元素更新的更新。

https://htmx.org/attributes/hx-swap-oob/

更多关于更新其他内容

于 2021-10-12T19:32:53.707 回答
1

如果您在使用 http 重定向时遇到问题，那么这可能会对您有所帮助：

如果您想要通过 htmx 触发的响应来执行完整页面重新加载，那么您不应返回 http 重定向响应（302，在 Django 中也称为 HttpResponseRedirect）。

您需要设置 hx-redirect 响应标头：https ://htmx.org/reference/#response_headers

如果您设置 hx-redirect 并将 http 响应代码设置为 302，则 htmx 将在 ajax 级别（而不是全屏）进行重定向。

下一件事可能会让新用户感到困惑：如果您习惯了旧的 post/redirect/get 模式，那么有一个好消息：不再需要它了。

如果客户端发送了一个 http-post，并且所有数据都通过了验证，那么您应该返回一个包含新 HTML 的 http 2xx 响应。不需要过时的重定向/获取舞蹈。

如果您认为 htmx 文档可以得到改进，那么您可能需要创建一个拉取请求来改进文档。

于 2021-10-22T20:33:54.510 回答