La meilleure façon d'utiliser les attributs de données html5 avec l'aide de rails content_tag?

102

Le problème, bien sûr, est que les symboles rubis n'aiment pas les traits d'union. Donc, quelque chose comme ça ne fonctionnera évidemment pas:

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 pourrais simplement interpoler:

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

Je préfère le plus tard mais les deux semblent un peu dégoûtants. Quelqu'un connaît-il un meilleur moyen?

ruby-on-rails html Cory Schires
la source

Réponses:

140

Rails 3.1 est livré avec des assistants intégrés:

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;]" />
stephencelis
la source
Cela ajoute simplement des éléments à mon URL. Il n'ajoute pas d'attribut de données.
Jim Wharton
2
Bien sûr que oui ... Mais si vous utilisez un helper qui prend à la fois un hachage d'url ET un hachage d'options html, vous devez explicitement placer les deux hachages entre accolades {}. link_to par exemple: link_to "label", {: action => blub}, {: data => {: foo =>: bar}
,:
Cela fonctionne: 'data-bv-notempty-message' => "Le nom d'utilisateur est requis"
Ivan
66

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

:"data-foo" => :bar
Eimantas
la source
1
@reto - vérifiez la date de réponse.)
Eimantas
Pourquoi le colon de départ :?
Joshua Pinter
1
Le signe deux-points fait de la clé un symbole.
Eimantas
10

Un assistant n'est pas une mauvaise idée, mais semble un peu exagéré pour ce qui est essentiellement moi-même fusy sur la syntaxe. Je suppose que rien n'est intégré aux rails, ce que j'espérais. Je vais juste utiliser ceci:

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)
Cory Schires
la source
6

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

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

Version des 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>
coloradobleu
la source
5

En vous appuyant sur les 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 })

Ce 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>
coisnepe
la source
-3

Vous pouvez toujours créer votre propre fonction d'aide pour pouvoir écrire

<%= div_data_tag the_id, some_text, some_data %>
Rodrigob
la source