Cara terbaik untuk menggunakan atribut data html5 dengan helper content_tag rails?

102

Masalahnya, tentu saja, simbol ruby ​​tidak menyukai tanda hubung. Jadi sesuatu seperti ini jelas tidak akan berhasil:

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

Salah satu opsinya adalah dengan menggunakan string daripada simbol: 

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

Atau saya bisa menginterpolasi:

"<div id='foo' data-data_attr='#{some_variable}'>Some Text</div>".html_safe

Saya agak lebih suka nanti tapi keduanya tampak sedikit kotor. Ada yang tahu cara yang lebih baik?

ruby-on-rails html Cory Schires
sumber

Jawaban:

140

Rails 3.1 dikirimkan dengan pembantu built-in:

http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag

Misalnya,

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />
stephencelis.dll
sumber
Ini sebenarnya hanya menambahkan sesuatu ke URL saya. Itu tidak menambahkan atribut data.
Jim Wharton
2
Tentu saja .... Tetapi jika Anda menggunakan helper yang mengambil hash url DAN hash opsi html Anda harus secara eksplisit menggabungkan kedua hash dalam tanda kurung kurawal {}. link_to misalnya: link_to "label", {: action => blub}, {: data => {: foo =>: bar},: class => "test"}
ulangi
Ini berfungsi: 'data-bv-notempty-message' => "Nama pengguna diperlukan"
Ivan
66

Sudahkah Anda mencoba menggunakan kutipan dengan simbol? Sesuatu seperti:

:"data-foo" => :bar
Eimantas
sumber
1
@reto - periksa tanggal jawaban.)
Eimantas
Mengapa titik dua mulai :?
Joshua Pinter
1
Titik dua menjadikan kunci sebagai simbol.
Eimantas
10

Pembantu bukanlah ide yang buruk tetapi tampaknya sedikit berlebihan untuk apa yang pada dasarnya saya rewel tentang sintaks. Saya kira tidak ada yang dibangun di dalam rel yang saya harapkan. Saya hanya akan menggunakan ini:

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

JQuery Air (codeschool.com) Level 1, Contoh 1

Versi Codeschool / platform-independent

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

Versi 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>
coloradoblue.dll
sumber
5

Berdasarkan jawaban sebelumnya, inilah cara kanonik untuk melakukannya sekarang:

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

Yang menghasilkan:

<div id="foo" data-attr="some variable">Some Text</div>
<div id="foo" data-other-attr="some variable">Some Text</div>
coisnepe.dll
sumber
-3

Anda selalu dapat membuat fungsi pembantu Anda sendiri sehingga Anda dapat menulis

<%= div_data_tag the_id, some_text, some_data %>
rodrigob
sumber