HTMX:将函数传递给“hx-on”以读取事件

HTMX: Passing a function to `hx-on` for reading the event

提问人:J0sh 提问时间:11/10/2023 更新时间:11/10/2023 访问量:53

问:

我一定在这里错过了绝对明显的东西:

使用 htmx,我正在尝试发送 get 请求并在发送之前在 javascript 中对其进行配置。HTMX 提供了 ,而事件基本上就是这样。hx-gethx-onconfigRequest

但是,我似乎缺少一个明显的大按钮,因为我无法执行我给它的函数或 lambda,只有即时 JS 工作(就其本质而言)不能接受参数,因此无法访问事件。hx-on

简而言之:我缺少什么才能使以下内容按预期工作?

<button hx-get="/api/things"
        hx-on:config-request="event => console.log('🙌 ', event)"
        hx-target="#target"
>Click Me!</button>
<p id="target">...</p>
  • hx-on:config-request="console.log('This will work 👍')"会起作用,但显然无法参与事件。
  • hx-on:config-request="() => console.log('This won't work 👎')"行不通
  • hx-on:config-request="console.log"效果不佳
  • hx-on:config-request="someOtherKnownMethod"效果不佳

我很困惑。😕

感谢您抽出时间接受采访。有什么想法吗?

JavaScript HTML 事件处理 htmx

评论


答:

1赞 mariodev 11/10/2023 #1

event 关键字可直接访问,因此无需使用 lambda 函数。此外,您还缺少 “::”,这是访问 htmx 事件的较短方法。

像这样的 smth 应该可以工作(确保您拥有最新的 htmx js lib 版本):

hx-on::config-request="console.log('🙌 ', event)"