rails content_tagヘルパーでhtml5データ属性を使用する最良の方法?


102

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

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

1つのオプションは、シンボルではなく文字列を使用することです。

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

私は後者が好きですが、どちらも少し粗いようです。誰かがより良い方法を知っていますか?

回答:


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に追加するだけです。データ属性は追加されません。
ジムウォートン、2011

2
もちろんそうです...しかし、urlハッシュとhtmlオプションハッシュの両方を受け取るヘルパーを使用している場合は、両方のハッシュを中括弧{}で明示的にラップする必要があります。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 %>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.