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

debugcn 发表于 Dev

布莱恩-韦尔奇

我需要以f.association简单的形式向输入添加数据属性。为此，我找到了这篇文章和随后对simpleform 文档的参考。使用标准语法添加类很容易，我想知道为什么使用包装器很难。

所以而不是标准：

<%= 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"> (...)

布莱恩-韦尔奇

我找到了结合我在不同帖子中找到的策略的解决方案。

它的长处和短处是使用该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>'s 具有自定义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>
(...)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。