Rails Formtastic: agregar el campo "datos-" a la etiqueta de opción

Resuelto krn asked hace 13 años • 3 respuestas

Tengo:

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

Necesito:

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

Rails no admite atributos de datos HTML5 para la etiqueta de opción. Formtastic sugiere crear un método auxiliar para esto.

El archivo Léame de Formtastic describe cómo extender las etiquetas de entrada. Sin embargo, en select_input.rb no puedo encontrar ningún método que pueda afectar la etiqueta de opción . Entonces, ¿cómo hago esto?

Además, encontré la gema Enhanced_select que hace exactamente lo que necesito, pero no puedo hacer que funcione con formtastic.

krn avatar Oct 02 '11 12:10 krn
Aceptado

En realidad, Rails admite agregar cualquier tipo de etiqueta html a las opciones. Normalmente tendrías:

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

cual te daria

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

Si agrega un hash a las matrices para cada opción, las claves/valores hash se agregarán como atributo HTML a la opción, por ejemplo

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

producirá las etiquetas requeridas:

<option value="1" data-price="20">First</option>
<option value="2" data-price="30">Second</option>
Wolfgang avatar Jan 31 '2012 08:01 Wolfgang

Suponiendo que tienes un modelo llamado Elementos, puedes hacer esto en formato fantástico de la siguiente manera:

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

Básicamente, lo que estás haciendo es pasar una serie de matrices donde el valor final de cada matriz es un hash. P.ej

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

Rails 3+ (quizás 2.x; no lo confirmé) usará el hash en una matriz y simplemente lo agregará al html de la etiqueta de opción. Dándote lo siguiente:

<option data-price="$100" value="1">Item 1</option>
<option data-price="$200" value="2">Item 2</option>
Peregrinator avatar Sep 16 '2013 02:09 Peregrinator