Turbo Rails broadcast_refresh_to无法触发Stimulus控制器connect方法

针对你遇到的Turbo 8.0.4中broadcast_refresh_to触发morphing导致Stimulus控制器connect方法不执行的问题，有以下几种可行方案：

方案一：监听Turbo Morph事件触发初始化 #

Turbo在morphing前后会触发turbo:before-morph和turbo:after-morph全局事件，你可以在Stimulus控制器里监听turbo:after-morph事件，手动调用初始化逻辑，无需依赖connect方法：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.initComponent()
    // 绑定morph完成后的事件监听
    document.addEventListener("turbo:after-morph", this.handleMorphComplete.bind(this))
  }

  disconnect() {
    // 断开控制器时移除监听，避免内存泄漏
    document.removeEventListener("turbo:after-morph", this.handleMorphComplete.bind(this))
  }

  handleMorphComplete() {
    // 重新执行组件初始化逻辑
    this.initComponent()
  }

  initComponent() {
    // 这里写你的组件初始化代码，比如绑定事件、初始化第三方插件等
    console.log("组件完成初始化")
  }
}

方案二：改用broadcast_replace_to替换元素 #

broadcast_refresh_to默认使用morphing更新内容，而broadcast_replace_to会直接替换目标DOM元素，这样被替换元素上的Stimulus控制器会重新触发connect方法。

修改Blog模型的回调：

after_update_commit -> { broadcast_replace_to blog }

确保视图中的目标容器有唯一ID（Turbo需要定位替换的元素）：

<div data-controller="blogs" id="blog-detail-container">
  <!-- 博客详情内容 -->
</div>

方案三：禁用目标元素的Morphing #

给Stimulus控制器所在的容器添加data-turbo-morph="false"属性，强制Turbo跳过该元素的morphing逻辑，直接替换内容，从而触发控制器的connect方法：

<div data-controller="blogs" data-turbo-morph="false">
  <!-- 博客内容 -->
</div>

方案选择建议 #

• 方案一：适合需要保留morphing平滑更新效果，仅需重新执行初始化逻辑的场景
• 方案二：适合允许替换整个元素，希望完全重建Stimulus控制器实例的场景
• 方案三：适合局部禁用morphing，快速解决特定元素初始化问题的场景

内容的提问来源于stack exchange，提问作者dp7