django 如何从SSE事件中获取htmx get的url,而该事件本身会触发hx-get调用?

ie3xauqp  于 2022-11-26  发布在  Go
关注(0)|答案(1)|浏览(257)

我正在使用django与django-channels和htmx。
在某些情况下,我的django视图会向订阅了相关频道的用户发送SSE事件,例如通知。其中一些事件(取决于事件名称)需要触发模态弹出窗口(例如电子商务订单或服务完成后的评级模态)。
我已经实现了服务器端事件和数据生成的需求。我想在前端使用htmx sse扩展(django模板)。
我的问题是,我想得到一个事件,比如order_complete,并使用它来触发一个hx-get调用到一个特定的url,该url将由sse事件发送。然后,hx-get的响应将被放置在模态视图逻辑存在的占位符中。我可以得到该事件并触发get请求,如htmx sse扩展文档中所述。但我不知道如何获取要放入hx-get的url。
我对JavaScript的了解很少,对htmx的了解也不多。我看过带外交换,但我不确定这是否是我所需要的。
我将感谢任何意见或建议,继续包括一个非htmx解决方案,如果它的性能更好或更容易。

  • 谢谢-谢谢
tktrz96b

tktrz96b1#

您可以将参数附加到(固定)url。
在客户端javascript中处理sseMessage事件。

document.body.addEventListener('htmx:sseMessage', function (evt) {

        //* check if this event is the one you want to use
        if (evt.detail.type !== "order_complete") {
            return;
        }

        //* If a JSON string was sent, leave it as it is 
        //evt.detail.elt.setAttribute("hx-vals", evt.detail.data);

        //* if not
        var msg = {};
        msg.orderId = evt.detail.data;   
        evt.detail.elt.setAttribute("hx-vals", JSON.stringify(msg));
    });

请参阅https://htmx.org/attributes/hx-vals/
如果evt.detail.data是123:

/orders/showmodal?orderId=123

HTML:

<div hx-ext="sse" sse-connect="/sse-something">
        <div hx-get="/orders/showmodal"
                hx-trigger="sse:order_complete"
                hx-swap="innerHTML"
                hx-target="#idModalPlaceholder">
        </div>
    </div>

更新

您也可以只针对order_complete使用事件侦听程式。

document.body.addEventListener('sse:order_complete', function (evt) {

        //* If a JSON string was sent, leave it as it is 
        //evt.detail.elt.setAttribute("hx-vals", evt.detail.data);

        //* if not
        var msg = {};
        msg.orderId = evt.detail.data;   
        evt.detail.elt.setAttribute("hx-vals", JSON.stringify(msg));
    });

相关问题