RoR7应用中Stimulus控制器connect方法页面导航时不触发问题

问题原因 #

Rails 7默认启用Turbo Drive，应用内导航不会刷新整个页面，而是通过异步加载并替换页面内容。这会导致两种常见情况：

• 如果你的Stimulus控制器绑定在布局元素（比如全局header）上，connect()钩子只会在首次页面刷新时触发一次，后续Turbo导航不会重新触发。
• 如果控制器绑定在页面内元素，虽然connect()会触发，但Turbo的页面缓存可能保留了元素之前修改后的样式状态，导致displayBanner()执行后看不到视觉变化。

解决方案 #

方案1：绑定控制器到页面级元素（推荐）

确保你的Stimulus控制器是绑定在每个页面的目标元素（比如页面内的banner容器）上，而不是全局布局元素。这样每次Turbo导航到新页面，新的元素会触发connect()钩子，自动执行displayBanner()。

方案2：监听Turbo导航事件（全局控制器场景）

如果控制器需要全局绑定，通过监听Turbo的事件来确保每次页面加载（包括Turbo导航）都执行方法，同时处理缓存状态：

修改你的Stimulus控制器代码：

connect() {
  this.displayBanner();
  // 监听Turbo渲染完成事件
  document.addEventListener('turbo:render', this.handleTurboRender.bind(this));
  // 监听Turbo缓存前事件，重置样式避免缓存保留状态
  document.addEventListener('turbo:before-cache', this.resetStyles.bind(this));
}

disconnect() {
  // 移除事件监听，防止内存泄漏
  document.removeEventListener('turbo:render', this.handleTurboRender.bind(this));
  document.removeEventListener('turbo:before-cache', this.resetStyles.bind(this));
}

handleTurboRender() {
  this.displayBanner();
}

displayBanner() {
  // 使用requestAnimationFrame确保样式修改在DOM更新后执行
  requestAnimationFrame(() => {
    this.titleTarget.style.transform = "translateY(0%)";
    this.titleTarget.style.opacity = "1";
    this.btnTarget.style.opacity = "1";
  });
}

resetStyles() {
  // 重置元素样式到初始状态，保证缓存页面是默认状态
  this.titleTarget.style.transform = "translateY(100%)";
  this.titleTarget.style.opacity = "0";
  this.btnTarget.style.opacity = "0";
}

方案3：禁用单个页面的Turbo（不推荐）

如果以上方案都不适用，可以在特定页面的链接或元素上添加data-turbo="false"，强制该导航刷新整个页面，但这会失去Turbo带来的性能优势。

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