在 HTMX 中使用多个自定义事件作为触发器，我可以识别正在使用的是哪个触发器吗？

Question

我在我的 Django 项目中使用 HTMX 来根据之前的选择更改表单中的元素。在某些时候，我使用自定义事件并按照此处解决方案 3 中的指示监听它：https://htmx.org/examples/update-other-content/

一切都按预期工作，使用逗号分隔的两个触发器时也是如此。

不过，我想传递一个 header，其值取决于用作触发器的事件。触发 foo -> header A，触发 bar -> header B。下面是一些应该有助于理解的代码。

<div hx-get="{% url 'someurl' %}" 
     hx-trigger="foo from:body, bar from:body" 
     hx-target="#sometarget"
     hx-swap="outerHTML"
     hx-headers='{"someheader":"foo_value"}' OR '{"someheader":"bar_value"}'>

到目前为止，我已经尝试过：

将 target.value 作为 header 值（您可以将其用作触发器过滤器，所以我认为它也可以在 hx-headers 中使用）
在导致触发器关闭的视图中传递 headers 或上下文变量，这样我就可以在模板中使用 Django 的 {% if %}。但是他们没有到达这里，因为该视图呈现了模板的不同部分，而这只是被触发，因为它由于事件冒泡 body 侦听事件

有什么建议吗？

Answer 1

HTMX 提供了 htmx:configRequest 事件，我们可以在 HTMX 调度请求之前检查和更改负载。触发事件位于evt.detail.triggeringEvent.type属性，headerobject位于evt.detail.headers。因此，我们可以通过在特定页面上包含以下 JS 代码段来根据触发事件添加自定义 header：

<script>
document.body.addEventListener('htmx:configRequest', (evt) => {
  if (evt.detail.triggeringEvent.type === 'foo') {
    evt.detail.headers['someheader'] = 'foo_value'
  }
  if (evt.detail.triggeringEvent.type === 'bar') {
    evt.detail.headers['someheader'] = 'bar_value'
  }
})
</script>

在 HTMX 中使用多个自定义事件作为触发器，我可以识别正在使用的是哪个触发器吗？

Using multiple custom event as triggers in HTMX, can I identify which of the triggers is being used?

javascript

python

django

htmx

intercooler.js