如何在Rails中将类添加到simple_form输入包装器中？

Question

我需要以简单的形式将数据属性添加到f.association输入中。为此，我找到了this article并随后引用了simpleform's documentation。使用标准语法添加类很容易，我想知道为什么使用包装器证明它很困难。

所以不是标准的：

<%= f.association :size, input_html:{class: 'sku-suffix-component'} %>

我正在使用：

<%= f.input :size, as: :select, input_html:{class: 'sku-suffix-component'} do %>
  <%= f.select :size, Size.all.map{ |s| [s.name, s.id, {'data-code-num' => s.code_num}] } %>
<% end %>

令我很沮丧的是，添加的class在<select>标记中无处（更不用说缺少其他默认类，并且id的命名约定[id="product_size_id"变成了{ {1}}]。我已经尝试过id="product_size"哈希的各种语法和位置。

在下面您可以看到外观上的差异等。右侧使用的是标准语法。

这是生成的html：

input_html

与之比较：

<select name="product[size]" id="product_size"> (...)

Answer 1

尝试此解决方案，如果可能的话，可以为jsfiddle创建一些链接，以便我们可以测试并尝试找到解决方案

<%= f.input :size do %>
    <%= f.select :size, Size.all.map { |s| [s.name, s.id, { class: 'sku-suffix-component', 'data-code-num' => s.code_num }]}, input_html: { class: 'sku-suffix-component' }, include_blank: true %>
<% end %>

Answer 2

我找到了解决方案，结合了我在单独帖子中找到的策略。

长短不一是利用map方法，而不是在自定义输入包装器中使用。

<%= f.association :size, collection: Size.all.map{ |s| [s.name, s.id, {'data-code-num' => s.code_num}]}, input_html:{class: 'sku-suffix-component'} %>

这与添加的类完美融合了我想要的<select>，而<option>带有自定义data-属性。

<select class="form-control select required sku-suffix-component" name="product[size_id]" id="product_size_id">
  <option value=""></option>
  <option data-code-num="001" value="113">onesize</option>
(...)