¿La mejor manera de usar atributos de datos html5 con rails content_tag helper?

102

El problema, por supuesto, es que a los símbolos rubí no les gustan los guiones. Entonces, algo como esto obviamente no funcionará:

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

Una opción es usar una cadena en lugar de un símbolo: 

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

O simplemente podría interpolar:

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

Prefiero el último, pero ambos parecen un poco asquerosos. ¿Alguien conoce una forma mejor?

ruby-on-rails html Cory Schires
fuente

Respuestas:

140

Rails 3.1 se envía con ayudantes integrados:

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

P.ej,

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />
Stephencelis
fuente
En realidad, esto solo agrega cosas a mi URL. No agrega un atributo de datos.
Jim Wharton
2
Por supuesto que sí ... Pero si está utilizando un ayudante que toma tanto un hash de URL como un hash de opciones html, debe envolver explícitamente ambos hash entre corchetes {}. link_to por ejemplo: link_to "etiqueta", {: action => blub}, {: data => {: foo =>: bar},: class => "test"}
respuesta
Esto funciona: 'data-bv-notempty-message' => "El nombre de usuario es obligatorio"
Ivan
66

¿Ha intentado usar comillas con símbolo? Algo como:

:"data-foo" => :bar
Eimantas
fuente
1
@reto - verifique la fecha de respuesta.)
Eimantas
¿Por qué el colon inicial :?
Joshua Pinter
1
Los dos puntos hacen de la tecla un símbolo.
Eimantas
10

Un ayudante no es una mala idea, pero parece un poco exagerado para lo que esencialmente me desconcierta la sintaxis. Supongo que no hay nada integrado en los rieles, que es lo que esperaba. Solo usaré esto:

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

JQuery Air (codeschool.com) Nivel 1, Ejemplo 1

Codeschool / versión independiente de la 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>

Versión de rieles

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

Sobre la base de las respuestas anteriores, esta es la forma canónica de hacerlo ahora:

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

Que genera:

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

Siempre puede crear su propia función de ayuda para luego escribir

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