Rails 7应用中Stimulus控制器无法识别Outlet问题求助

问题描述 #

在Rails 7应用中，尝试通过点击图标切换表单的display属性，已将图标绑定到toggler控制器，表单绑定到togglee控制器，并将表单设为图标的Outlet，但toggler控制器始终无法识别该Outlet，this.toggleeOutlets返回undefined。

HTML代码 #

图标元素：

<i class="toggle-display fa fa-chevron-down" data-controller="toggler" data-toggler-togglee-outlet="#filter-form" data-action="click->toggler#handleClick" title="Asset Filter"></i>

表单元素：

<div id="filter-form" style="display:none" data-controller="togglee">
  ...
</div>

控制器代码 #

toggler_controller.js：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static outlets = [ "togglee" ]

  connect() {
    console.log("Toggler controller connected")
  }

  handleClick(event) {
    console.log("toggler controller: handleClick")
    event.preventDefault();

    console.log("outlet controllers:", this.toggleeOutlets)
    ...
  }
}

togglee_controller.js：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("Togglee controller connected")
  }
}

控制台输出 #

Toggler controller connected
Togglee controller connected
toggler controller: handleClick
outlet controllers: undefined

环境版本：

• rails (7.0.1)
• stimulus-rails (1.2.1)
• turbo-rails (1.3.2)

问题原因 #

1. Outlet加载时机不匹配：Stimulus默认在源控制器（toggler）初始化时解析Outlet，若目标控制器（togglee）在源控制器之后完成连接，源控制器的Outlet不会自动更新，导致无法获取目标控制器实例。
2. Turbo/动态加载影响：如果表单元素是通过Turbo Frame动态加载的，可能会出现控制器实例关联延迟，导致Outlet无法识别。

解决方案 #

方案1：手动触发Outlet重新加载 #

在toggler控制器中监听目标控制器的连接事件，触发Outlet重新加载：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static outlets = [ "togglee" ]

  connect() {
    console.log("Toggler controller connected")
    // 监听控制器连接事件，当togglee控制器初始化时重新加载Outlet
    this.application.addEventListener('controller:connect', (event) => {
      if (event.detail.controller.identifier === 'togglee') {
        this.loadOutlets()
      }
    })
  }

  handleClick(event) {
    console.log("toggler controller: handleClick")
    event.preventDefault();

    // 切换表单display属性
    if (this.toggleeOutlet) {
      const formElement = this.toggleeOutlet.element
      formElement.style.display = formElement.style.display === 'none' ? 'block' : 'none'
    }
  }
}

方案2：直接获取目标控制器实例（绕过Outlet） #

如果Outlet配置始终有问题，可直接通过DOM元素获取目标控制器实例：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("Toggler controller connected")
  }

  handleClick(event) {
    console.log("toggler controller: handleClick")
    event.preventDefault();

    const formElement = document.querySelector('#filter-form')
    if (formElement) {
      // 获取togglee控制器实例
      const toggleeController = this.application.getControllerForElementAndIdentifier(formElement, 'togglee')
      // 切换display属性
      formElement.style.display = formElement.style.display === 'none' ? 'block' : 'none'
    }
  }
}

方案3：验证基础配置正确性 #

确认以下细节：

• 源控制器static outlets中的名称（togglee）与data属性data-toggler-togglee-outlet中的名称完全一致（大小写敏感）。
• 目标表单元素的data-controller="togglee"属性无拼写错误，且元素在页面静态加载时已存在（若用Turbo Frame，需确保Frame加载完成后控制器已初始化）。

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