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

Question

我需要以简单的形式向 f.association 输入添加数据属性。为此，我找到了 this article and subsequent reference to 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" 变成 id="product_size"])。我尝试了 input_html 散列的各种语法和位置。

下面你可以看到外观等方面的差异。右边是使用标准语法。

这是结果 html:

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

与：

相比

<select class="form-control select required sku-suffix-component" name="product[color_id]" id="product_color_id"> (...)

Answer 1

试试这个解决方案，如果可能的话，为 jsfiddle 创建一些 link，这样我们就可以测试并尝试找到解决方案

<%= 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> 添加的 class 和 <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>
(...)

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

How can I add classes to a simple_form input wrapper in Rails?

ruby-on-rails

wrapper

simple-form

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

How can I add classes to a simple_form input wrapper in Rails?

ruby-on-rails

wrapper

simple-form

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