2

我正在使用htmx向我的页面添加一些 AJAX 调用。我有一个cart-count元素被定义为在页面加载后 1s 检索购物车中的项目数：

<span id="cart-count" hx-get="/cart/count"
     hx-trigger="load delay:1s" hx-target="#cart-count" hx-swap="outerHTML">
</span>

我还有一个add-to-cart按钮，在它自己的东西之后（例如改变自己以remove from cart使用 htmx），发送一个额外的属性

    response['HX-Trigger-After-Swap'] = "cart-updated"

到前端（有关文档，请参见此处）。

我有一个可以工作的事件监听器，

document.body.addEventListener("cart-updated",
    function (evt) {
        alert("cart updated")
    })

但是如何在 JS 中触发元素呢hx-get？#cart-count

注意

hx-trigger="load delay:1s, cart-updated"

如果购物车的东西在元素的父链中，那将起作用add-to-cart，但不幸的是，我的网页并非如此。

请注意，这里也提出了这个问题

4

2 回答 2

7

您可以使用修饰符在最新版本的 htmx 中侦听文档正文上的事件，from:如下所示：

<span hx-get="/cart/count"
      hx-trigger="load delay:1s, cart-updated from:body" 
      hx-swap="outerHTML">
</span>

另请注意，您不需要在此处使用显式目标，因为默认目标是在其hx-get上定义的元素。

于 2021-01-24T23:25:35.697 回答
1

非常感谢您发布这个问题，也感谢@1cg 的回答！:)

这个 htmx 库很棒！

您可以在此处检查此服务器响应 hx-trigger 与 django 的工作方式： https ://github.com/ramiboutas/veryacademy_ecom

基本上，当用户将商品添加到购物篮（或购物车）时，您可以在响应中传递一个事件（在示例中为“updateBasketNumber”），就像在这个视图函数中一样

@require_http_methods(["PUT", "POST"])
def add_to_basket(request, product_id):
    basket = Basket(request)
    product = get_object_or_404(Product, id=product_id)
    basket.add(product=product)
    response = render(request, 'store/basket/_addedbutton.html')
    trigger_client_event(response, "updateBasketNumber", { },)
    return response

在 html 中，您可以添加此触发事件以从服务器获取更多信息（因此您可以更新购物篮或购物车中的商品数量）：

<div id="basket-number" class="d-inline-flex" 
hx-get="{% url 'basket:update-number' %}" 
hx-trigger="load delay:0.5s, updateBasketNumber from:body">
{% include "store/basket/_number.html" %} 
</div>

我在教程中实现了更多的触发事件（最初来自非常学院的 youtube 频道；他使用 ajax &js！），你可以去 github repo 并查看更多。

于 2021-10-28T05:53:08.637 回答