Html5 veri özniteliklerini rails content_tag yardımcısıyla kullanmanın en iyi yolu?

102

Elbette sorun, yakut sembollerinin kısa çizgileri sevmemesidir. Yani bunun gibi bir şey kesinlikle işe yaramayacak:

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

Bir seçenek, bir sembol yerine bir dize kullanmaktır:

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

Ya da sadece enterpolasyon yapabilirim:

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

Sonrasını tercih ediyorum ama ikisi de biraz iğrenç görünüyor. Daha iyi bir yol bilen var mı?

ruby-on-rails html

— Cory Schires
kaynak

141

Rails 3.1 yerleşik yardımcılarla birlikte gönderilir:

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

Örneğin,

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />

— Stephencelis
kaynak

Bu aslında URL'ime bir şeyler ekler. Veri özelliği eklemez.

— Jim Wharton

2

Tabii ki öyle .... Ama hem url hash hem de html seçenekleri hash'i alan bir yardımcı kullanıyorsanız, her iki hash'i de küme parantezleri {} içinde açıkça sarmanız gerekir. Örneğin link_to: link_to "etiketi", {: aksiyon => blub}, {: Veri => {: ece =>: bar}: Sınıf => "test"}

— Reto

Bu çalışır: 'data-bv-notempty-message' => "Kullanıcı adı gerekli"

— Ivan

66

Sembollü tırnak işaretlerini kullanmayı denediniz mi? Gibi bir şey:

:"data-foo" => :bar

— Eimantas
kaynak

1

@reto - cevap tarihini kontrol edin).

— Eimantas

Neden başlangıç kolon :?

— Joshua Pinter

1

İki nokta üst üste, anahtarı bir sembol yapar.

— Eimantas

10

Bir yardımcı kötü bir fikir değil ama aslında benim sözdizimi hakkında titiz olduğum için biraz abartılı görünüyor. Sanırım rayların içine yerleştirilmiş hiçbir şey yok ki umduğum şey buydu. Sadece bunu kullanacağım:

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

— Cory Schires
kaynak

6

JQuery Air (codeschool.com) Seviye 1, Örnek 1

Kod okulu / platformdan bağımsız sürüm

<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 Sürümü

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

— renk mavisi
kaynak

5

Önceki yanıtlara dayanarak, bunu şimdi yapmanın kanonik yolu şu şekildedir:

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

Hangi üretir:

<div id="foo" data-attr="some variable">Some Text</div>
<div id="foo" data-other-attr="some variable">Some Text</div>

— Coisnepe
kaynak

-3

Her zaman kendi yardımcı işlevinizi oluşturabilirsiniz, böylece yazabilirsiniz

<%= div_data_tag the_id, some_text, some_data %>

— rodrigob
kaynak