Rails Formtastic: aggiunta di campo "dati-" per opzione etichetta

Question

ho:

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

Ho bisogno:

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

Rails non supporta gli attributi dei dati HTML5 per l'opzione etichetta. Formtastic suggests per creare un metodo di supporto per questo.

Leggimi di Formtastic describes come estendere i tag di input. Tuttavia, in select_input.rb non riesco a trovare alcun metodo che possa influire sul tag tag. Quindi, come faccio a fare questo?

Inoltre, ho trovato la gemma enhanced_select che fa esattamente ciò di cui ho bisogno, ma non sono in grado di farlo funzionare con formtastic.

Answer 1

In realtà i binari supportano l'aggiunta di qualsiasi tipo di tag html alle opzioni. Di solito si avrebbe:

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

che darebbe

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

Se si aggiunge un hash nelle matrici per ciascuna opzione i tasti hash/valori verranno aggiunti come attributo HTML per l'opzione, per esempio

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

produrrà i tag richiesti:

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

Answer 2

Supponendo di avere un modello chiamato Elementi, si può effettivamente fare questo in Formtastic in questo modo:

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

In sostanza quello che stai facendo sta passando un array di array in cui il valore finale di ogni array è un hash. E.g.

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

Rails 3+ (forse 2.x - non ho conferma) userò l'hash in quali serie e semplicemente aggiungerlo al html del tag dell'opzione. Dandovi la seguente:

<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}] 
]) 

Produce

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

Advantage

Utilizzando i dati: {...} è più conciso e se si utilizza più tag dati CAN salva codice.