htmx - HTMX 加载后触发自定义事件

Question

想象一个选项卡式面板。我对 tab1 中的数据进行了一些更改，然后我使用 HTMX 在 tab1 中发布和交换内容。现在，tab1中可能有部分信息，当我更改它时，我还必须刷新tab2的内容。

我想将 tab2 设置为hx-trigger="my-custom-event-when-tab-1-updates-the-special-place". 都好。但现在我想通知 HTMX 在加载/交换 tab1 的特定部分后引发此事件。

我该怎么做？

或者在这些情况下有没有更容易做的不同方法？

这基本上是在 UI 中处理副作用的问题。是的，你做了一件事，但现在其他事情也需要发生。

Answer 1

最简单的方法是在您返回选项卡 1 的内容时触发事件服务器端。您可以在 htmx 文档中找到更多信息：https ://htmx.org/headers/hx-trigger/

您需要将 tab2 上的触发器更改为 listen my-custom-event-when-tab-1-updates-the-special-place from:body。

另一种方法是使用htmx:afterSwap事件。为此，您需要监听 tab1 上的事件，然后手动触发 tab2 上的事件。