रेल कंटेंट_टैग हेल्पर के साथ html5 डेटा विशेषताओं का उपयोग करने का सबसे अच्छा तरीका?


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

मैं बाद में पसंद करता हूं, लेकिन दोनों थोड़े स्थूल लगते हैं। किसी को भी बेहतर तरीके से पता है?

जवाबों:


140

बिल्ट-इन हेल्पर्स के साथ 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 पर चीजों को जोड़ता है। यह एक डेटा विशेषता नहीं जोड़ता है।
जिम व्हार्टन

2
बेशक यह करता है .... लेकिन अगर आप एक सहायक का उपयोग कर रहे हैं जो एक url हैश और html दोनों विकल्प लेता है, तो आपको स्पष्ट रूप से दोनों हैश को घुंघराले कोष्ठक {} में लपेटना होगा। link_to उदाहरण के लिए: link_to "लेबल", {: action => blub}, {: data => {: foo =>: bar},: class => "test"}
reto

यह काम करता है: 'data-bv-notempty-message' => "उपयोगकर्ता नाम आवश्यक है"
इवान

66

क्या आपने प्रतीक के साथ उद्धरणों का उपयोग करने की कोशिश की है? कुछ इस तरह:

:"data-foo" => :bar

1
@reto - जवाब तिथि की जांच)।
Eimantas

क्यों शुरू होती है कोलन :?
जोशुआ पिंटर

1
बृहदान्त्र कुंजी को एक प्रतीक बनाता है।
ईमंतस

10

हेल्पर का बुरा विचार नहीं है, लेकिन सिंटैक्स के बारे में जो कुछ भी मुझे गलत लग रहा है, उसके लिए एक ओवरकिल का एक सा लगता है। मुझे लगता है कि रेल में कुछ भी नहीं बनाया गया है जो मैं उम्मीद कर रहा था। मैं अभी इसका उपयोग करूंगा:

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

6

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>

संस्करण संस्करण

<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 %>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.