Najlepszy sposób na użycie atrybutów danych html5 z pomocnikiem content

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

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

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