TurboStream 元素渲染后如何反应

Question

我正在通过 TurboStream 发送表格。当响应完成并且 Stream 元素已渲染时，我必须做出反应以修改 Doom 的部分内容。这个逻辑不属于新渲染的元素，所以我不想把它放在

connect

方法中。

我想接收一个事件或一些信号，告诉我新元素已被接收并渲染。

我发现没有计划添加流后渲染事件。

我如何知道新元素何时已渲染？

Answer 1

最常见的建议是在渲染元素中添加刺激控制器，并使用

connect()

方法做任何你想做的事情。但这会用不属于它的逻辑污染新元素的控制器。

我提出了一个折衷的解决方案。是的，我在渲染元素中添加了一个 Stimulus 控制器，但是这个 Stimulus 控制器 非常精简且通用，因此它可以重用，并且对事件做出反应的逻辑位于另一个专门的 controller 中。

这是我正在使用的通用解决方案：

我有一个可重复使用的控制器，可以触发

CustomEvent

。 CustomEvent 的值可通过

data-value

属性进行配置：

// app/javascript/controllers/i_am_here_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    eventName: String
  }

  connect() {
    const trigger = new CustomEvent(this.eventNameValue);
    window.dispatchEvent(trigger);
  }
}

在使用 TurboStream 渲染的元素中，我连接此控制器：

<div
  data-controller="i-am-here"
  data-i-am-here-event-name-value="my-element-rendered"
>
  /* edited */
</div>

现在我只需要在另一个控制器中监听这个事件 它负责在内容加载时做出反应：

// app/javascript/controllers/reaction_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    window.addEventListener("my-element-rendered", this.react.bind(this));
  }

  react() {
    console.log("Here I can react");
  }
}