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


El problema, por supuesto, es que a los símbolos ruby no les gustan los guiones. Así que 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

Yo sorta prefiero el más tarde, pero ambos parecen un poco asqueroso. ¿Alguien conoce una manera mejor?

Author: Cory Schires, 2010-11-23

6 answers

Rails 3.1 se envía con ayudantes incorporados:

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

Por ejemplo,

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />
 131
Author: stephencelis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-11-09 05:18:14

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

:"data-foo" => :bar
 60
Author: Eimantas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-23 16:51:50

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

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)
 9
Author: Cory Schires,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-05 19:23:26

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 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>
 6
Author: coloradoblue,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-17 17:16:37

Basándose en 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>
 1
Author: coisnepe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-08 09:34:59

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

<%= div_data_tag the_id, some_text, some_data %>
 -3
Author: rodrigob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-28 02:21:02