Najlepszy sposób na użycie atrybutów danych html5 z pomocnikiem content_tag railsów?

102

Problem polega oczywiście na tym, że symbole rubinowe nie lubią myślników. Więc coś takiego oczywiście nie zadziała:

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

Jedną z opcji jest użycie łańcucha zamiast symbolu: 

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

Albo mógłbym po prostu interpolować:

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

Wolę trochę później, ale oba wydają się trochę obrzydliwe. Czy ktoś zna lepszy sposób?

ruby-on-rails html Cory Schires
źródło

Odpowiedzi:

140

Rails 3.1 są dostarczane z wbudowanymi pomocnikami:

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

Na przykład,

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />
stephencelis
źródło
To właściwie tylko dodaje rzeczy do mojego adresu URL. Nie dodaje atrybutu danych.
Jim Wharton
2
Oczywiście, że tak ... Ale jeśli używasz pomocnika, który pobiera zarówno hash url, jak i hash opcji html, musisz jawnie zawinąć oba hashe w nawiasy klamrowe {}. link_to na przykład: link_to "etykieta", {: action => blub}, {: data => {: foo =>: bar}
,:
To działa: 'data-bv-notempty-message' => "Nazwa użytkownika jest wymagana"
Ivan
66

Czy próbowałeś używać cudzysłowów z symbolem? Coś jak:

:"data-foo" => :bar
Eimantas
źródło
1
@reto - sprawdź datę odpowiedzi.)
Eimantas
Dlaczego początkowa okrężnica :?
Joshua Pinter
1
Dwukropek sprawia, że ​​klucz jest symbolem.
Eimantas
10

Pomocnik nie jest złym pomysłem, ale wydaje się trochę przesadą, biorąc pod uwagę to, co zasadniczo jest dla mnie wybrednym w kwestii składni. Przypuszczam, że nie ma nic wbudowanego w szyny, na co liczyłem. Po prostu użyję tego:

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)
Cory Schires
źródło
6

JQuery Air (odeschool.com) Poziom 1, Przykład 1

Wersja dla szkół wyższych / niezależna od platformy

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

Wersja szynowa

<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
źródło
5

Opierając się na poprzednich odpowiedziach, oto kanoniczny sposób, aby zrobić to teraz:

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

Który generuje:

<div id="foo" data-attr="some variable">Some Text</div>
<div id="foo" data-other-attr="some variable">Some Text</div>
coisnepe
źródło
-3

Zawsze możesz utworzyć własną funkcję pomocniczą, aby móc pisać

<%= div_data_tag the_id, some_text, some_data %>
rodrigob
źródło