Rails Simple_form关联元素添加Stimulus data-controller属性无效求助
问题描述
尝试为Simple_form生成的表单元素绑定Stimulus控制器,但无论采用哪种写法,data-controller属性都不会出现在最终渲染的select元素中,导致控制器无法响应。已尝试以下写法:
- 直接传递属性作为顶层参数:
<%= simple_form_for book do |f| %> <%= render 'shared/form_errors', form: f %> ... <%= f.association :book_format, label: false, 'data-controller': 'book-format-select' %> ... <% end %>
- 使用蛇形命名的符号键:
<%= f.association :book_format, label: false, data_controller: 'book-format-select' %>
- 放在
html选项中:
<%= f.association :book_format, label: false, html: {data-controller: 'book-format-select' } %>
最终渲染出的select元素始终没有目标属性:
<select class="select required" name="book[book_format_id]" id="book_book_format_id">
解决方案
问题出在Simple_form的参数传递规则上:
html选项是用来配置**包裹输入元素的容器(如div)**的属性,不会作用于内部的select标签;- 直接传递
data-controller这类顶层参数,Simple_form不会将其绑定到输入控件上。
正确的写法是使用input_html选项,专门为输入控件本身添加属性:
<%= f.association :book_format, label: false, input_html: { 'data-controller': 'book-format-select' } %>
或者采用Rails风格的data属性嵌套写法:
<%= f.association :book_format, label: false, input_html: { data: { controller: 'book-format-select' } } %>
这样渲染后的select元素就会包含data-controller="book-format-select"属性,Stimulus控制器就能正常响应了。
内容的提问来源于stack exchange,提问作者tkhobbes
相关产品推荐
相关产品推荐

