วิธีที่ดีที่สุดในการใช้แอตทริบิวต์ข้อมูล html5 กับราง content_tag helper?


102

แน่นอนปัญหาก็คือสัญลักษณ์ทับทิมไม่ชอบขีดกลาง เห็นได้ชัดว่าสิ่งนี้ใช้ไม่ได้:

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

ทางเลือกหนึ่งคือใช้สตริงแทนสัญลักษณ์:

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

ฉันชอบแบบหลัง แต่ทั้งสองอย่างดูแย่ไปหน่อย ใครรู้วิธีที่ดีกว่านี้

คำตอบ:


141

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 ของฉัน ไม่ได้เพิ่มแอตทริบิวต์ข้อมูล
Jim Wharton

2
แน่นอนมันทำได้ .... แต่ถ้าคุณใช้ตัวช่วยที่ใช้ทั้งแฮช URL และแฮชตัวเลือก html คุณจะต้องรวมแฮชทั้งสองไว้ในวงเล็บปีกกาอย่างชัดเจน {} link_to ตัวอย่าง: link_to "label", {: action => blub}, {: data => {: foo =>: bar},: class => "test"}
ย้อนกลับ

ใช้งานได้: 'data-bv-notempty-message' => "ต้องระบุชื่อผู้ใช้"
Ivan

66

คุณลองใช้เครื่องหมายคำพูดที่มีสัญลักษณ์หรือไม่? สิ่งที่ต้องการ:

:"data-foo" => :bar

1
@reto - ตรวจวันที่ตอบ)
Eimantas

ทำไมลำไส้ใหญ่เริ่มต้น:?
Joshua Pinter

1
ลำไส้ใหญ่ทำให้คีย์เป็นสัญลักษณ์
Eimantas

10

ผู้ช่วยไม่ใช่ความคิดที่ไม่ดี แต่ดูเหมือนจะเกินความจำเป็นไปหน่อยสำหรับสิ่งที่ฉันกำลังยุ่งเกี่ยวกับไวยากรณ์ ฉันคิดว่าไม่มีอะไรติดตั้งไว้ในรางซึ่งเป็นสิ่งที่ฉันหวังไว้ ฉันจะใช้สิ่งนี้:

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

6

JQuery Air (codechool.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>

เวอร์ชันราง

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