新手问题无法监听到 turbo:render 事件

qinsicheng · 2023年09月24日 · 最后由 qinsicheng 回复于 2023年09月25日 · 652 次阅读

这是我的 Turbo Stream 操作：

<%= turbo_stream.prepend "words", @word %>

我希望通过监听turbo:render事件，在此从 DOM 来获取新加入的 @word 渲染的节点，并对其样式进行修改。但是发现监听不到该事件，但是页面上已经成功显示了新加的数据

我目前可以监听到的事件有：

turbo:load
turbo:before-cache
before-stream-render

有什么办法能在 Turbo Stream 返回数据并修改 dom 后，进行某些操作？

我在 app/javascript/application.js 中写的：

document.addEventListener("turbo:render", function (event) {
    console.log("turbo:render")
});

Rei #1 2023年09月24日

当一个元素出现在页面时执行某操作，更适合用 sitmulus。

jicheng1014 #2 2023年09月24日

https://turbo.hotwired.dev/reference/events 根据提示来看应该就是监听 turbo:render.

turbo:render fires after Turbo renders the page. This event fires twice during an application visit to a cached location: once after rendering the cached version, and again after rendering the fresh version.

另外是不是应该在 html 上加？

Turbo fires events on the document.documentElement object (i.e., the element).

Rei #3 2023年09月24日

turbo:render 也许对应 turbo visit 和 cache render，不包括 stream render。

4 楼已删除

5 楼已删除

qinsicheng #6 2023年09月24日

对

jicheng1014 回复

我目前找到两个有效的解决办法（但实际只是换了种方式执行，并没有解决我提到的根本问题）：

1 . Hotwire Discussion 中提到的：

add a Stimulus data-controller attribute to the element you render inside the element. Then implement the connect() method on that controller to know when the element has been loaded into the document.

通过在被渲染的 frame 上加入 Stimulus，通过 connect() 触发函数，执行想要的操作

2 . Github Issue

document.addEventListener("turbo:before-stream-render", function (event) {
  event.preventDefault();
  event.detail.newStream.performAction();
  console.log("执行你想要的操作")   （这个解决方式稍微能好点儿）
});