Как я могу добавить классы к оболочке ввода simple_form в Rails?

Question

Мне нужно добавить атрибут данных для ввода 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"> (...)

Answer 1

Я нашел решение, сочетающее стратегии, которые я нашел в отдельных сообщениях.

В общем и целом, он использовал метод 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>
(...)

Answer 2

Попробуйте это решение и, если возможно, создайте ссылку для 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 %>