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

У меня есть:

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

Мне нужно:

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

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

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

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

Ответы

Ответ 1

В действительности рельсы поддерживают добавление любых типов тегов 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>

Ответ 2

Предполагая, что у вас есть модель под названием "Элементы", вы можете сделать это в formtastic следующим образом:

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 data-price="$100" value="1">Item 1</option>
<option data-price="$200" value="2">Item 2</option>

Ответ 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>

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

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