मूंछें नेस्टेड संरचनाओं खुली हुई अनुभाग बग

Question

मैं इस बहुत ही सरल संरचना जो मूंछें के साथ पार्स नहीं किया जा सकता है और हमेशा रिटर्न है:

बंद न किया गया अनुभाग: चयनित

<ul id="source"> 
{{#recomms}}                                                 
    <li> 
    <select> 
     {{#sizes}} 
     <option {{#selected}}selected="selected"{{/selected}} >{{label}}</option> 
     {{/sizes}} 
    </select> 
    </li> 
{{/recomms}} 
</ul> 

प्रतिपादन जावास्क्रिप्ट:

$("#placement").html(Mustache.render($('#source').html(), data)); 

यदि मैं एक विकल्प टैग से # {{चयनित}} को स्थानांतरित करता हूं तो यह ठीक से काम करना शुरू कर देता है।

क्या मूंछ इन नेस्टेड # {{टैग एचटीएमएल तत्वों के भीतर रखा गया है?

Answer 1

मूंछ इस तरह काम करना चाहिए, आप इसे सही तरीके से कर रहे हैं।

यह HTML संरचना/टैग/आदि

कौन सा पर्यावरण/पार्सर संस्करण आप मूंछें के लिए उपयोग कर रहे हैं के बारे में परवाह नहीं है एक साधारण पाठ पार्सर है और इसलिए? जैसा कि यह आधिकारिक डेमो में काम करता प्रतीत होता है।

मैं Mustache demo site में निम्नलिखित में प्रवेश किया और यह उम्मीद के रूप में काम करता है:

मूंछें टेम्पलेट

<ul id="source"> 
{{#recomms}}                                                 
    <li class=""> 
    <select name="size" class="recommendation-size"> 
     {{#sizes}} 
     <option value="{{val}}" {{#selected}}selected="selected"{{/selected}} >{{label}}</option> 
     {{/sizes}} 
    </select> 
    </li> 
{{/recomms}} 
</ul> 

नमूना JSON

{"recomms": [ 
    {"sizes": [ 
     { "val": "value", "label": "label", "selected": false }, 
     { "val": "value2", "label": "label2", "selected": true } 
    ]} 
]} 

आउटपुट

<ul id="source"> 
<li class=""> 
<select name="size" class="recommendation-size"> 
<option value="value" >label</option> 
<option value="value2" selected="selected">label2</option> 
</select> 
</li> 
</ul> 

आप एक Fiddle कि त्रुटि आप यह पता लगा क्या हो रहा है में मदद मिलेगी हो रही है दर्शाती से लिंक कर सकते हैं, लेकिन यह काम करना चाहिए।

संपादित

मैं इस समस्या की खोज की है हो सकता है। आप एचटीएमएल को jQuery का उपयोग कर मौजूदा एचटीएमएल तत्व से लोड कर रहे हैं, जिसका मतलब है कि ब्राउज़र पहले ही एचटीएमएल प्रस्तुत करने की कोशिश कर चुका है और अमान्य बिट्स को {{/selected}} बिट सहित छोड़ दिया है।

जैसे ...

• एक Javascript चर के बजाय पेज
• लोड के HTML स्रोत में टेम्पलेट रखो अपने जावास्क्रिप्ट कोड में मूंछें टेम्पलेट लोड करने के लिए एक अलग तकनीक का उपयोग करके देखें सर्वर का उपयोग कर jQuery.get()
• टेम्पलेट में < और > के भागने और एक छिपा हुआ textarea में रख, तो jQuery के .val() विधि का उपयोग टेम्पलेट प्राप्त करने के लिए और से टेम्पलेट < औरunescapeइससे पहले कि आप इसे प्रस्तुत करें

जैसा कि आपने टिप्पणी में उल्लेख किया है, पहला विकल्प अच्छी तरह से काम करता है!