Melhor maneira de usar atributos de dados html5 com o helper content_tag do rails?

102

O problema, é claro, é que os símbolos de rubi não gostam de hifens. Então, algo assim obviamente não funcionará:

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

Uma opção é usar uma string em vez de um símbolo: 

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

Ou eu poderia apenas interpolar:

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

Eu meio que prefiro o último, mas ambos parecem um pouco nojentos. Alguém conhece uma maneira melhor?

ruby-on-rails html Cory Schires
fonte

Respostas:

140

O Rails 3.1 vem com ajudantes integrados:

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

Por exemplo,

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />
Stephencelis
fonte
Na verdade, isso apenas acrescenta coisas ao meu URL. Não adiciona um atributo de dados.
Jim Wharton
2
Claro que sim .... Mas se você estiver usando um helper que pega um hash de url E um hash de opções html, você terá que envolver explicitamente ambos os hashes em chaves {}. link_to por exemplo: link_to "label", {: action => blub}, {: data => {: foo =>: bar},: class => "test"}
reto
Isso funciona: 'data-bv-notempty-message' => "O nome de usuário é obrigatório"
Ivan,
66

Você já tentou usar aspas com símbolo? Algo como:

:"data-foo" => :bar
Eimantas
fonte
1
@reto - verifique a data da resposta.)
Eimantas
Por que o cólon inicial :?
Joshua Pinter
1
Os dois pontos transformam a chave em um símbolo.
Eimantas
10

Um ajudante não é uma má ideia, mas parece um pouco exagerado para o que essencialmente sou eu sendo confuso sobre sintaxe. Suponho que não haja nada embutido nos trilhos, o que eu esperava. Vou apenas usar isso:

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

JQuery Air (codeschool.com) Nível 1, Exemplo 1

Versão Codeschool / independente de plataforma

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

Versão 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>
coloradoblue
fonte
5

Com base nas respostas anteriores, esta é a maneira canônica de fazer isso agora:

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

O que gera:

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

Você sempre pode criar sua própria função auxiliar para, então, escrever

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