Question

もちろん、問題はルビ記号がハイフンを好まないということです。したがって、このような何かは明らかに動作しません。

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 

Iを

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

一つのオプションは、シンボルではなく、文字列を使用することですソルジャーは後で好きですが、どちらも少し面白そうです。誰でも良い方法を知っていますか？

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

Answer 2

シンボルで引用符を使用してみましたか？何かのように：あなたは常にあなた自身のヘルパー関数を作成することができます

:"data-foo" => :bar 

Answer 3

ので、あなたは

<%= div_data_tag the_id, some_text, some_data %> 

Answer 4

ヘルパー悪い考えではありませんが、基本的に私はおよそfusyされているもののためにやり過ぎのビットを思わを書くことができます構文。私は、私が望んでいたレールに何も組み込まれていないと思います。私はこれを使用します：

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

Answer 5

jQueryのエア（codeschool.com）レベル1 、例1

コードスクール/プラットフォームに依存しないバージョン

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

Answer 6

ビルは、今ここにそれを行うには標準的な方法です：

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>