Лучший способ использовать атрибуты данных html5 с помощником rails content_tag?

102

Проблема, конечно, в том, что рубиновые символы не любят дефисы. Так что что-то вроде этого явно не сработает:

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

Один из вариантов - использовать строку, а не символ: 

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

Или я мог бы просто интерполировать:

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

Я вроде как предпочитаю позднее, но оба кажутся немного мерзкими. Кто-нибудь знает способ лучше?

ruby-on-rails html Кори Ширес
источник

Ответы:

141

Rails 3.1 поставляется со встроенными помощниками:

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

Например,

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />
Stephencelis
источник
На самом деле это просто добавляет элементы к моему URL-адресу. Он не добавляет атрибут данных.
Джим Уортон
2
Конечно, есть .... Но если вы используете помощник, который принимает как хеш URL, так и хеш опций html, вы должны явно заключить оба хэша в фигурные скобки {}. link_to например: link_to "label", {: action => blub}, {: data => {: foo =>: bar}
,:
Это работает: 'data-bv-notempty-message' => «Требуется имя пользователя»
Иван
66

Вы пробовали использовать кавычки с символом? Что-то вроде:

:"data-foo" => :bar
Эймантас
источник
1
@reto - проверьте дату ответа.)
Эймантас
Почему начинается толстая кишка :?
Джошуа Пинтер
1
Двоеточие делает ключ символом.
Эймантас
10

Помощник - неплохая идея, но кажется излишним из-за того, что, по сути, я беспокоюсь о синтаксисе. Полагаю, в рельсы ничего не встроено, на что я и надеялся. Я просто использую это:

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)
Кори Ширес
источник
6

JQuery Air (codechool.com) Уровень 1, Пример 1

Codeschool / независимая от платформы версия

<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

<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>
колорадосиний
источник
5

Основываясь на предыдущих ответах, вот канонический способ сделать это сейчас:

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

Что генерирует:

<div id="foo" data-attr="some variable">Some Text</div>
<div id="foo" data-other-attr="some variable">Some Text</div>
Coisnepe
источник
-3

Вы всегда можете создать свою собственную вспомогательную функцию, чтобы затем вы могли написать

<%= div_data_tag the_id, some_text, some_data %>
Родригоб
источник