如何在 Rails 中将“turbo:frame-load”事件与 Hotwire 和 Stimulus 一起使用？

Question

我试图在 Turbo 框架完成更新时触发刺激事件。在我的 Rails 应用程序中，设置如下。

在视图中（我这里使用的是 slim）：

div data-controller="logger"
  = turbo_frame_tag "europe-calculation-fields",
    data: { action: "turbo:frame-load->logger#log turbo:before-frame-render->logger#log turbo:frame-render->logger#log" } do
    = render "europe_calculation_fields"

我的涡轮视图是这样做的：

= turbo_stream.update "europe-calculation-fields", render("finalize_screens/europe_calculation_fields")

所有这些都工作正常。

finalize_screens/europe_calculation_fields

部分在

europe-calculation-fields

Turbo 框架内渲染，正如它应该的那样。

但是我无法触发任何帧加载或渲染事件。他们只是……不这样做。我已经仔细检查了

logger#log

方法是否正常工作（它通过简单的单击事件按预期工作），并且我已经 查看了文档，其中说事件应该在框架上触发，所以不是确定我在这里缺少什么吗？

Answer 1

您必须确保实际导航框架才能触发相关事件。如果您需要更新的不仅仅是帧，您可以在帧内渲染额外的涡轮流：
https://github.com/hotwired/turbo/issues/1258

<%= turbo_frame_tag "europe-calculation-fields",
  data: {
    controller: "logger",
    action: "turbo:frame-load->logger#log
             turbo:before-frame-render->logger#log
             turbo:frame-render->logger#log"
  }
do %>
  <%= render "europe_calculation_fields"%>
  <%= link_to "action", "/url" %>
<% end %>

并像平常一样使用匹配的帧和涡轮流进行响应HTML响应：

# app/views/{controller}/{action}.html.erb

<%= turbo_frame_tag "europe-calculation-fields" do %>
  <%= render "europe_calculation_fields"%>
  <%= turbo_stream.update "europe-calculation-fields", render("finalize_screens/europe_calculation_fields") %>
<% end %>