使用rails content_tag帮助程序使用html5数据属性的最佳方法?

Cor*_*res 97 html5 ruby-on-rails

当然,问题是红宝石符号不喜欢连字符.所以这样的东西显然不会起作用:

content_tag(:div, "Some Text", :id => "foo", :data-data_attr => some_variable)
Run Code Online (Sandbox Code Playgroud)

一种选择是使用字符串而不是符号:

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)
Run Code Online (Sandbox Code Playgroud)

或者我可以插入:

"<div id='foo' data-data_attr='#{some_variable}'>Some Text</div>".html_safe
Run Code Online (Sandbox Code Playgroud)

我更喜欢后者,但两者看起来都有点粗糙.谁知道更好的方法?

ste*_*lis 138

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;]" />
Run Code Online (Sandbox Code Playgroud)

  • 当然它确实....但是如果你使用一个带有url哈希和html选项哈希的帮助器,你必须用花括号{}明确地包装两个哈希.link_to例如:link_to"label",{:action => blub},{:data => {:foo =>:bar},:class =>"test"} (2认同)

Eim*_*tas 66

您是否尝试过使用带符号的引号?就像是:

:"data-foo" => :bar
Run Code Online (Sandbox Code Playgroud)

  • 冒号使按键成为一个符号。 (2认同)

Cor*_*res 10

一个帮助者并不是一个坏主意,但对于基本上我对语法的看法来说似乎有些过分.我想铁轨中没有任何东西是我所希望的.我会用这个:

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)
Run Code Online (Sandbox Code Playgroud)


col*_*lue 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>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)


coi*_*epe 5

基于以前的答案,这是现在的规范方法:

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

产生:

<div id="foo" data-attr="some variable">Some Text</div>
<div id="foo" data-other-attr="some variable">Some Text</div>
Run Code Online (Sandbox Code Playgroud)