Il modo migliore per utilizzare gli attributi dei dati html5 con l'helper content

102

Il problema, ovviamente, è che ai simboli rubino non piacciono i trattini. Quindi qualcosa del genere ovviamente non funzionerà:

content_tag(:div, "Some Text", :id => "foo", :data-data_attr => some_variable)

Un'opzione è usare una stringa piuttosto che un simbolo:

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)

Oppure potrei semplicemente interpolare:

"<div id='foo' data-data_attr='#{some_variable}'>Some Text</div>".html_safe

In un certo senso preferisco l'ultimo, ma entrambi sembrano un po 'disgustosi. Qualcuno sa di un modo migliore?

ruby-on-rails html

— Cory Schires
fonte

140

Rails 3.1 viene fornito con helper integrati:

http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag

Per esempio,

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />

— stephencelis
fonte

Questo in realtà aggiunge solo cose al mio URL. Non aggiunge un attributo di dati.

— Jim Wharton

2

Ovviamente lo fa .... Ma se stai usando un helper che accetta sia un hash dell'URL CHE un hash delle opzioni html devi racchiudere esplicitamente entrambi gli hash tra parentesi graffe {}. link_to ad esempio: link_to "label", {: action => blub}, {: data => {: foo =>: bar},: class => "test"}

— reto

Funziona: "data-bv-notempty-message" => "Il nome utente è obbligatorio"

— Ivan

66

Hai provato a usare le virgolette con il simbolo? Qualcosa di simile a:

:"data-foo" => :bar

— Eimantas
fonte

1

@reto - controlla la data della risposta.)

— Eimantas

Perché il colon iniziale :?

— Joshua Pinter

1

I due punti rendono la chiave un simbolo.

— Eimantas

10

Un aiutante non è una cattiva idea, ma sembra un po 'eccessivo per quello che essenzialmente sono io che sono schifoso sulla sintassi. Suppongo che non ci sia nulla di integrato nei binari che è quello che speravo. Userò solo questo:

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)

— Cory Schires
fonte

6

JQuery Air (codeschool.com) Livello 1, Esempio 1

Codeschool / versione indipendente dalla piattaforma

<section id="tabs">
  <ul>
    <li><a href="#2012-09-27" data-flights="6">Sep 27</a></li>
    <li><a href="#2012-09-28" data-flights="5">Sep 28</a></li>
    <li><a href="#2012-09-29" data-flights="5">Sep 29</a></li>
  </ul>
</section>

Versione Rails

<section id="tabs">
  <ul>
    <li><%= content_tag(:a, "Sep 27",:href=> "#2012-09-27", :data => { :flights => "6" } ) %></li>
    <li><%= content_tag(:a, "Sep 28",:href=> "#2012-09-28", :data => { :flights => "5" } ) %></li>
    <li><%= content_tag(:a, "Sep 29",:href=> "#2012-09-29", :data => { :flights => "5" } ) %></li>
  </ul>
</section>

— coloradoblue
fonte

5

Basandosi sulle risposte precedenti, ecco il modo canonico per farlo ora:

content_tag(:div, "Some Text", id: "foo", data: { attr: some_variable })
content_tag(:div, "Some Text", id: "foo", data: { "other-attr" => some_variable })

Che genera:

<div id="foo" data-attr="some variable">Some Text</div>
<div id="foo" data-other-attr="some variable">Some Text</div>

— coisnepe
fonte

-3

Puoi sempre creare la tua funzione di supporto in modo da poter scrivere

<%= div_data_tag the_id, some_text, some_data %>

— rodrigob
fonte

Il modo migliore per utilizzare gli attributi dei dati html5 con l'helper content_tag di rails?