2011-12-13 18 views
44

मैं एक रेल 3.1.3 आवेदन के भीतर ट्विटर-बूटस्ट्रैप का उपयोग कर रहा हूँ। मैं की तरह बनाया जाता है के साथ कई तत्व होते हैं:क्या मैं ट्विटर-बूटस्ट्रैप पॉपओवर डेटा-सामग्री में एचटीएमएल टैग का उपयोग कर सकता हूं?

<a data-original-title="Quality" rel="popover" data-content="Did they do a good job? 5 for Really Nice, 4 for Good Enough, 3 for Average, 2 for Somewhat OK, 1 for Really Bad">Q</a> 

मैं के समान सामग्री अनुभाग में एक आदेश दिया सूची है करना चाहते हैं:

<OL reversed="reversed"> 
    <LI> for Really Nice </LI> 
    <LI> for Good Enough </LI> 
    ... 
</OL> 

वहाँ जावास्क्रिप्ट को संशोधित किए बिना यह करने के लिए एक आसान तरीका है ? जो भी मैं कोशिश करता हूं, एचटीएमएल कोड ब्राउजर पर इस तरह व्याख्या करने के बजाए प्रदर्शित होता है।

अद्यतन

दाऊद के सुझाव

link_to 'Q', '#', options: { data-original-title: "Quality", rel: 'popover', data-content: "Did they do a good job? <ol><li> for Really Nice </li><li>...</li></ol>".html_safe } 

प्रति निम्नलिखित कोड का उपयोग करना मेरे सेटअप के साथ एक सिंटैक्स त्रुटि उत्पन्न करता है। मुझे लगता है कि यह बताता है कि क्यों: Ruby 1.9 hash with a dash in a key। तो मैं इसका उपयोग कर रहा हूं:

<%= link_to 'Q', '#', options: { :"data-original-title" => "Quality", :rel => 'popover', :"data-content" => "Did they do a good job? <ol><li> for Really Nice </li></ol>".html_safe } %> 

यह काम नहीं करता है। यह निम्न HTML उत्पन्न करता है:

<a href="#" options="{:&quot;data-original-title&quot;=&gt;&quot;Quality&quot;, :rel=&gt;&quot;popover&quot;, :&quot;data-content&quot;=&gt;&quot;Did they do a good job? &lt;ol&gt;&lt;li&gt; for Really Nice &lt;/li&gt;&lt;/ol&gt;&quot;}">Q</a> 

उत्तर

89

आप एक बनाने की जरूरत अपने स्ट्रिंग पर html_safe कॉल करने की आवश्यकता पॉपओवर उदाहरण (पॉपओवर जे एस कोड के बाद जगह अपने जावास्क्रिप्ट फ़ाइल में इस) html विकल्प सक्षम है:

$('.popover-with-html').popover({ html : true }); 

फिर लिंक संरचना होगा:

<%= link_to('Q', '#', :class => "popover-with-html", :title => "Quality", "data-content" => "#{some_content_object.html_safe}") %> 

आप गतिशील सामग्री तैयार कर रहे होते हैं, तो आप html_safe उपयोग करने के लिए दाऊद की तरह का सुझाव दिया है ताकि रेल एचटीएमएल कोड बच नहीं करता है की जरूरत है। अन्यथा, आप सीधे उस सामग्री विशेषता के भीतर HTML डाल सकते हैं।

+0

इस समाधान के साथ एचटीएमएल विकल्प सही ढंग से पारित कर रहे हैं। हालांकि एचटीएमएल अभी भी डेटा-सामग्री के लिए व्याख्या नहीं किया गया है। यह फ़ायरफ़ॉक्स दिखाता है: Q Arman

+0

क्रोम और फ़ायरफ़ॉक्स दोनों में मेरे लिए ठीक काम करता है। – iwasrobbed

+0

ऐसा लगता है कि रेलवे उपरोक्त वाक्यविन्यास के साथ जेएस तक पहुंचने से पहले एचटीएमएल से बच रहा है। "Html: true" विकल्प सेट के साथ निम्न कार्य करता है: S Arman

0

हाँ, आप ऐसा कर सकते हैं, लेकिन आप (यदि स्ट्रिंग रेल द्वारा उत्पन्न होता है)

link_to 'Q', '#', :title => "Quality", :rel => 'popover', "data-content" => "Did they do a good job? <ol><li> for Really Nice </li><li>...</li></ol>".html_safe } 
+0

धन्यवाद डेविड! मैंने आपके सुझाव की कोशिश की और मुझे लगता है कि यह सही रास्ता है। हालांकि, "डेटा-मूल-शीर्षक" और "डेटा-सामग्री" मान्य HTML विशेषताएँ नहीं हैं जिन्हें link_to पर भेजा जा सकता है। "शीर्षक" डेटा-मूल-शीर्षक के बजाय "शीर्षक" काम करता है। मुझे कुछ भी नहीं मिल रहा है जो "डेटा-सामग्री" के बजाय काम करता है। कोई सुझाव? – Arman

+0

आपको उन्हें 'विकल्प' हैश के भीतर पास करने में सक्षम होना चाहिए। मेरा अद्यतन उत्तर देखें। रूबी 1.9.2 के साथ –

+0

आपका कोड एक वाक्यविन्यास त्रुटि उत्पन्न करता है। मुझे <% = link_to 'क्यू', '#', विकल्प: {: "डेटा-मूल-शीर्षक" => "गुणवत्ता",: rel => 'popover',: "डेटा-सामग्री" => " क्या उन्होंने अच्छा काम किया?

  1. वास्तव में अच्छा
  2. ...
".html_safe}%> इसके बजाय। हालांकि यह काम नहीं कर रहा है। उत्पन्न एचटीएमएल है: Q Arman

संबंधित मुद्दे

 संबंधित मुद्दे