Rails Formtastic: добавление поля data- в тег option

Question

У меня есть:

form.input :duration, as: select, collection: {}

Мне нужно:

<option value="" data-price="XXX"></option>

Rails не поддерживает атрибуты данных HTML5 для тега параметра.Formtastic предлагает создать вспомогательный метод для этого.

Formtastic readme описывает , как расширить входные теги.Однако в select_input.rb я не могу найти какой-либо метод, который бы воздействовал на тег option .Итак, как мне это сделать?

Также я нашел extended_select gem, который делает именно то, что мне нужно, но я не могу заставить его работать с formtastic.

Answer 1

На самом деле rails поддерживает добавление любого тега html к опциям.Обычно у вас будет:

options_for_select( [['First', 1], ['Second', 2]] )

, что даст вам

<option value="1">First</option>
<option value="2">Second</option>

Если вы добавите хеш в массивы для каждой опции, ключи / значения хеш-функции будут добавлены как атрибут HTMLопция, например,

options_for_select( [['First', 1, {:'data-price' => 20}],
                     ['Second', 2, {:'data-price' => 30}]] )

создаст необходимые теги:

<option value="1" data-price="20">First</option>
<option value="2" data-price="30">Second</option>

Answer 2

Предполагая, что у вас есть модель с именем Items, вы можете сделать это в форме, например:

form.select :duration, 
           collection: Items.map{|item| [item.name, item.id, {"data-price" => item.price}]}

По сути, вы передаете массив массивов, где окончательное значение в каждом массиве - хеш. Например.

[  
  ['Item 1', 1, {"data-price" => '$100'}],   
  ['Item 2', 2, {"data-price" => '$200'}]
]

Rails 3+ (возможно, 2.x - я не подтвердил) будет использовать хэш в массиве и просто добавит его в HTML тега option. Даю вам следующее:

<option data-price="$100" value="1">Item 1</option>
<option data-price="$200" value="2">Item 2</option>

Answer 3

options_for_select([
  ['Item 1', 1, data:{price: 121, delivery: 11}],
  ['Item 2', 2, data:{price: 122, delivery: 22}]
])

Производит

<option data-delivery="11" data-price="121" value="1">Item 1</option>
<option data-delivery="22" data-price="122" value="2">Item 2</option>

Преимущество

Использование данных: {...} является более кратким и при использовании несколькихтеги данных могут сохранять код.