Rails 7.1中simple_form未渲染Stimulus data-action属性问题

问题1：simple_form form.association 的 data-action 未渲染 #

原因 #

simple_form 的 form.association 方法不会直接接收顶级的 data 参数，自定义HTML属性必须通过 input_html 选项传递，否则会被框架忽略。另外Stimulus的data-action事件名无需加on前缀，直接用change即可。

正确ERB写法 #

<%= form.association :location, 
      label: "选择地点",
      input_html: {
        data: {
          action: "change->location-select#locationSelected"
        }
      } %>

验证效果 #

生成的HTML应包含目标属性：

<select name="model[location_id]" id="model_location_id" data-action="change->location-select#locationSelected">
  <!-- 选项内容 -->
</select>

问题2：snippet-draw控制器的data属性被忽略 + connect方法重复调用 #

1. 修复data属性不渲染问题 #

遵循simple_form的参数规则，将data属性放入input_html中，确保data-action指向正确的控制器方法：

<%= form.association :doc,
      label: "选择文档",
      input_html: {
        data: {
          action: "change->snippet-draw#handleDocChange"
        }
      } %>

2. 解决connect方法调用两次的问题 #

• 排查重复挂载：检查页面中是否存在两个带有data-controller="snippet-draw"的元素，或turbo-stream更新时重复插入了控制器元素。可在控制器中加日志确认挂载目标：

  // app/javascript/controllers/snippet_draw_controller.js
  import { Controller } from "@hotwired/stimulus"
  
  export default class extends Controller {
    connect() {
      console.log("SnippetDraw已挂载到元素:", this.element)
    }
  
    handleDocChange(event) {
      const docId = event.target.value
      this.loadSnippets(docId)
    }
  
    async loadSnippets(docId) {
      const response = await fetch(`/docs/${docId}/snippets`)
      const html = await response.text()
      document.getElementById("snippets-container").innerHTML = html
    }
  }
  

• 用turbo-frame优化内容加载：如果依赖turbo更新内容，建议用<turbo-frame>包裹目标区域，避免重复渲染控制器元素：

  <turbo-frame id="snippets-frame">
    <!-- 需更新的内容区域 -->
  </turbo-frame>
  

  控制器方法中改用turbo更新frame：

  handleDocChange(event) {
    const docId = event.target.value
    Turbo.visit(`/docs/${docId}/snippets`, { frame: "snippets-frame" })
  }
  

关键注意事项 #

• 确保Stimulus控制器文件名与data-controller命名一致（如snippet_draw_controller.js对应data-controller="snippet-draw"）
• 避免在同一页面重复挂载相同控制器，除非有明确业务需求
• 始终使用change事件而非onchange，Stimulus会自动处理事件绑定逻辑

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