与Rails content_tag助手一起使用html5数据属性的最佳方法?


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

我比较喜欢后者,但两者似乎都有些粗糙。有人知道更好的方法吗?

Answers:


140

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上。它不添加数据属性。
Jim Wharton

2
当然可以。...但是,如果您使用的是同时接受url哈希和html options哈希的辅助程序,则必须将两个哈希显式地用大括号{}包装。例如,link_to:link_to“ label”,{:action => blub},{:data => {:foo =>:bar}
,:

这有效:'data-bv-notempty-message'=>“用户名是必需的”
Ivan


10

帮手并不是一个坏主意,但对于我本质上对语法感到不满意,这似乎有点过头了。我想没有什么是我所希望的。我将使用此:

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

6

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>

-3

您总是可以创建自己的帮助器函数,这样您就可以编写

<%= div_data_tag the_id, some_text, some_data %>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.