Найкращий спосіб використання атрибутів даних html5 з рельсами content_tag helper?


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

Я сорту віддаю перевагу пізнішому, але обидва здаються трохи грубими. Хтось знає кращий спосіб?

Відповіді:


140

Рейки 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;]" />

Це фактично просто додає речі до моєї URL-адреси. Він не додає атрибут даних.
Джим Уортон

2
Звичайно, це .... Але якщо ви використовуєте помічник, який бере і URL-хеш, і хеш-параметри html, ви повинні явно загортати обидва хеша у фігурні дужки {}. link_to, наприклад: link_to "label", {: action => blub}, {: data => {: foo =>: bar},: class => "test"}
reto

Це працює: 'data-bv-notempty-message' => "Ім'я користувача потрібно"
Іван


10

Помічник - це не погана ідея, але здається трохи надмірним для того, що, по суті, мене метушиться щодо синтаксису. Я гадаю, що в рейки немає нічого, що я сподівався. Я просто використаю це:

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

6

JQuery Air (codechool.com) Рівень 1, приклад 1

Версія, незалежна від кодів / платформи

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

Версія рейки

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

-3

Ви завжди можете створити свою власну функцію помічника, щоб потім можна було писати

<%= div_data_tag the_id, some_text, some_data %>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.