2010-11-23 7 views
86

Le problème, bien sûr, est que les symboles rubis n'aiment pas les traits d'union. Donc, quelque chose comme cela évidemment ne fonctionnera pas:Meilleure façon d'utiliser les attributs de données html5 avec les rails content_tag helper?

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

Une option consiste à utiliser une chaîne plutôt qu'un symbole:

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

Ou je pouvais interpoler:

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

I sorta préfère le plus tard, mais les deux semblent un peu dégoûtant. Quelqu'un sait-il d'une meilleure façon?

Répondre

128

Rails 3.1 est livré avec intégré: aides

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

Par exemple,

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

Cela ajoute simplement des choses sur mon URL. Il n'ajoute pas d'attribut de données. –

+2

Bien sûr que oui ... Mais si vous utilisez un assistant qui prend à la fois un hachage d'url et un hachage d'options html, vous devez envelopper explicitement les deux hachages entre accolades {}. link_to par exemple: link_to "label", {: action => blub}, {: data => {: foo =>: barre},: class => "test"} – reto

+0

Cela fonctionne: 'data-bv-notempty -message '=> "Le nom d'utilisateur est requis" – Ivan

57

Avez-vous essayé d'utiliser des guillemets avec un symbole? Quelque chose comme:

:"data-foo" => :bar 
+1

Meilleure réponse ici! – imjp

+1

Donnez à cet homme l'acceptation. – JellicleCat

+3

Je ne vois pas la différence avec la deuxième suggestion d'OP ... – reto

-3

Vous pouvez toujours vous créer votre propre fonction d'aide alors vous pouvez écrire

<%= div_data_tag the_id, some_text, some_data %> 
9

Une aide n'est pas une mauvaise idée, mais semble un peu d'un surpuissant pour ce qui est de moi essentiellement être fusy au sujet syntaxe. Je suppose qu'il n'y a rien dans les rails, ce que j'espérais. Je vais juste utiliser ceci:

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

JQuery Air (codeschool.com) Niveau 1 , Exemple 1

École de codes/version indépendante de la plate-forme

<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> 

Rails Version

<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> 
1

bâtiment des réponses précédentes, voici la manière canonique de le faire maintenant:

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

qui génère:

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