将 html5 数据属性与 rails content_tag helper 一起使用的最佳方法？答案

【问题标题】：Best way to use html5 data attributes with rails content_tag helper?将 html5 数据属性与 rails content_tag helper 一起使用的最佳方法？
【发布时间】：2011-05-14 14:20:19
【问题描述】：

当然，问题在于红宝石符号不喜欢连字符。所以这样的事情显然是行不通的：

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

【解决方案1】：

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;]" />

【讨论】：

这实际上只是将内容附加到我的 URL 上。它不添加数据属性。
当然可以……但是如果您使用的助手同时接受 url 散列和 html 选项散列，则必须将两个散列显式包装在大括号 {} 中。 link_to 例如：link_to "label", {:action => blub}, {:data => {:foo => :bar}, :class=> "test"}
这有效：'data-bv-notempty-message'=>"用户名是必需的"

【解决方案2】：

您是否尝试过使用带符号的引号？比如：

:"data-foo" => :bar

【讨论】：

为什么以冒号开头:？
冒号使键成为符号。

【解决方案3】：

助手不是一个坏主意，但对于本质上我对语法很挑剔的东西来说似乎有点矫枉过正。我想rails中没有任何东西，这是我所希望的。我就用这个：

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

【讨论】：

【解决方案4】：

JQuery Air (codeschool.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>

【讨论】：

【解决方案6】：

你总是可以创建你自己的辅助函数，这样你就可以编写

<%= div_data_tag the_id, some_text, some_data %>

【讨论】：