Beste Möglichkeit, HTML5-Datenattribute mit dem Rails-Helfer content_tag zu verwenden?

102

Das Problem ist natürlich, dass Rubinsymbole keine Bindestriche mögen. So etwas funktioniert offensichtlich nicht:

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

Eine Möglichkeit besteht darin, eine Zeichenfolge anstelle eines Symbols zu verwenden: 

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

Oder ich könnte einfach interpolieren:

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

Ich bevorzuge das spätere, aber beide scheinen ein wenig eklig zu sein. Kennt jemand einen besseren Weg?

ruby-on-rails html Cory Schires
quelle

Antworten:

140

Rails 3.1 wird mit eingebauten Helfern geliefert:

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

Z.B,

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />
stephencelis
quelle
Dies hängt eigentlich nur Dinge an meine URL an. Es wird kein Datenattribut hinzugefügt.
Jim Wharton
2
Natürlich ... Aber wenn Sie einen Helfer verwenden, der sowohl einen URL-Hash als auch einen HTML-Options-Hash verwendet, müssen Sie beide Hashes explizit in geschweifte Klammern {} setzen. link_to zum Beispiel: link_to "label", {: action => blub}, {: data => {: foo =>: bar} ,: class => "test"}
reto
Dies funktioniert: 'data-bv-notempty-message' => "Der Benutzername ist erforderlich"
Ivan
66

Haben Sie versucht, Anführungszeichen mit Symbol zu verwenden? Etwas wie:

:"data-foo" => :bar
Eimantas
quelle
1
@reto - überprüfen Sie das Antwortdatum.)
Eimantas
Warum der Startpunkt :?
Joshua Pinter
1
Der Doppelpunkt macht den Schlüssel zum Symbol.
Eimantas
10

Ein Helfer ist keine schlechte Idee, scheint aber ein bisschen übertrieben für das zu sein, was mich an Syntax im Grunde verwirrt. Ich nehme an, es ist nichts in Schienen eingebaut, was ich mir erhofft hatte. Ich werde nur das verwenden:

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

JQuery Air (codeschool.com) Level 1, Beispiel 1

Codeschool / plattformunabhängige Version

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

Schienenversion

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

Aufbauend auf früheren Antworten ist hier der kanonische Weg, dies jetzt zu tun:

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

Was erzeugt:

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

Sie können jederzeit eine eigene Hilfsfunktion erstellen, um dann schreiben zu können

<%= div_data_tag the_id, some_text, some_data %>
Rodrigob
quelle