Rails Turbo 不会触发 Turbo:load 事件

Question

turbo:load 事件在turbo访问后不会被触发（正如文档所说）。在初始整页加载后，它会按预期工作。我可以捕获“turbo:before-fetch-response”事件，但我对turbo:load、:render、:frame-render、:frame-load 没有运气。

我的 Turbo_stream 请求格式为 TURBO_STREAM 以销毁附件。控制器响应是

respond_to do |format|
  format.turbo_stream do
    render 'attachments/delete_document',
               locals: { target: "docs-list-#{img.id}" }
  end
end

我正在返回两个涡轮流，其更新和删除操作按预期工作：

<turbo-stream action="remove" target="<%= target %>">
  <template></template>
</turbo-stream>

<turbo-stream action="update" target="flash_messages">
<template>
  <%= render partial: 'layouts/flash', formats: :html,
             locals: { type: :notice,
                       message: 'Attachment removed.' } %>
</template>
</turbo-stream>

（注意：这是另一篇post的碰撞。那里提出的解决方案在我的情况下不起作用，因为完整属性仅存在于HTML img元素。） （我在 Rails 7.0.1 中使用 @hotwired/turbo@^7.1.0、@hotwired/turbo-rails@^7.1.1）

Answer 1

我已经通过

turbo:render

事件解决了这个问题：

document.addEventListener('DOMContentLoaded', startFrontController)
document.addEventListener('turbo:render', startFrontController)

function startFrontController(event) {
  document.removeEventListener('DOMContentLoaded', startFrontController)
  new FrontController().start()
}

请参阅 Turbo 事件文档：https://turbo.hotwired.dev/reference/events

Answer 2

与 Sergio 的答案类似，我最终使用了 Turbo 提供的事件之一 - Turbo:before-fetch-response 在我的例子中，因为大多数其他事件没有触发。还是不知道为什么。

但是： 我发现最好的答案是使用刺激。提供一个干净的界面来添加 JavaScript 功能。

Answer 3

必须首先在 asstes/application.js 中启用 Turbo

import { Turbo } from "@hotwired/turbo-rails";
Turbo.setFormMode("on")

然后使用turbo:load事件而不是DOMContentLoaded事件来加载我的js内容