मूंछें (या Handlebars) दो सूचियों

Question

से अधिक बार-बार दोहराना मैं दो सरणियों है:

var content = { 
    "girls": ["Maria", "Angela", "Bianca"], 
    "digits": ["21.143.191.2", "123.456.78.90", "971.6.17.18.1"] 
}; 

और एक टेम्पलेट:

<script id="template" type="text/template"> 
    <ul> 
    <li><a href="{{digits}}">{{girls}}</a></li> 
    </ul> 
</script> 

मैं अंतिम परिणाम चाहते हैं होने के लिए:

<ul> 
    <li><a href="21.143.191.2">Maria</a></li> 
    <li><a href="123.456.78.90">Angela</a></li> 
    <li><a href="971.6.17.18.1">Bianca</a></li> 
</ul> 

मैंने {{#girls}} {{.}} {{/girls}} और {{#digits}} {{.}} {{/digits}} जैसे ब्लॉक मूंछों की कोशिश की है, लेकिन इससे कोई फर्क नहीं पड़ता कि मैं उन्हें किस तरह से घोंसला करता हूं, मुझे दोहराना प्रतीत होता है interlacing के बजाय चींटियों।

कोई विचार?

पीएस: जाहिर है भविष्य में हम आईपी पते मांगेंगे, फोन नंबर नहीं।

पीपीएस: इनमें से कोई भी असली आईपी होने का इरादा नहीं है, कृपया उन लड़कियों से संपर्क करने की कोशिश न करें!

Answer 1

आपको अपने content को पुनर्व्यवस्थित करने की आवश्यकता है ताकि आप केवल एक चीज़ पर पुन: व्यवस्थित हो सकें। आप कुछ इस तरह के साथ उन दो सरणियों जोड़ देते हैं तो:

var data = { girls: [ ] }; 
for(var i = 0; i < content.girls.length; ++i) 
    data.girls.push({ 
     name: content.girls[i], 
     number: content.digits[i] 
    }); 

फिर इस तरह एक टेम्पलेट:

<script id="template" type="text/template"> 
    <ul> 
    {{#girls}} 
     <li><a href="{{number}}">{{name}}</a></li> 
    {{/girls}} 
    </ul> 
</script> 

काम करना चाहिए।

Answer 2

"एमयू बहुत छोटी है" सलाह के साथ। और कुछ पागल विचार मैं जटिल templating के लिए एक दिलचस्प दृष्टिकोण के साथ आया था। * यह लगभग काम करता है!

<script type="text/template" id="template"> 
    <h1>{{title}}</h1> 
    <h3>{{calc}}</h3> 
    <ul> 
    <li><a href="{{digits}}">{{hair}}</a></li> 
    </ul> 
</script> 

और:

var content = { 
    title: "Black Book", 
    girls: ["blonde", "brunette", "redhead"], 
    digits: ['123', '456', '789'], 
    calc: function() { 
    return 2 + 4; 
    } 
}; 

और मैं इस तरह एक टेम्पलेट है:

तो चलो कहते हैं कि मैं इस सामग्री है (या डेटा या दृश्य) जो मैं एक टेम्पलेट में डाल करना चाहते हैं अंतिम परिणाम मैं चाहता हूँ यह है:

<h1>Black Book</h1> 
    <h3>6</h3> 
    <ul> 
    <li><a href="123">blonde</a></li> 
    <li><a href="456">brunette</a></li> 
    <li><a href="789">redhead</a></li> 
    </ul> 

समस्या हम सामना करना पड़ेगा हम सरणियों (या सूचियों) में नेस्ट है वह यह है कि हमारे मूल सामग्री, और हम Mustache.render करने की कोशिश की है, तो (एचटीएमएल, सामग्री) हम केवल एक ली आइटम या एक href के भीतर एक पूरी सरणी = "" विशेषता के साथ पहुंचते हैं। बहुत दुखी ...

तो वह दृष्टिकोण है, कई बार टेम्पलेट से गुजरता है। पहली बार, के माध्यम से पारित और शीर्ष स्तर के आइटम की जगह है, और के माध्यम से पारित करने के लिए अगले टेम्पलेट समायोजित। दूसरी बार, सूची में से एक को समायोजित, और के माध्यम से तीसरे पास, आदि आप सामग्री के कैसे कभी कई परतों के लिए के लिए टेम्पलेट समायोजित। के माध्यम से शीर्ष स्तर सामान में भरने

<script type="text/template" id="template"> 
    <h1>{{title}}</h1> 
    <h3>{{calc}}</h3> 
    <ul> 
    {{#hair}} 
    {{#digits}} 
    <li><a href="{{digits}}">{{hair}}</a></li> 
    {{/digits}} 
    {{/hair}} 
    </ul> 
</script> 

पहले पारित पर, और परिवर्तन {{अंक}} को {{: यहाँ नया प्रारंभिक टेम्पलेट है।अगले दर्रे से हम सिर्फ Mustache.render (template2, content.digits) फोन करता हूँ पर

<h1>Black Book</h1> 
    <h3>6</h3> 
    <ul> 
    {{#hair}} 
    {{#digits}} 
    <li><a href="{{.}}">{{hair}}</a></li> 
    {{/digits}} 
    {{/hair}} 
    </ul> 

;:}}

$.each(content, function (index, value) { 
    template2 = template.replace(/{{title}}/ig, content.title) 
        .replace(/{{calc}}/ig, content.calc) 
        .replace(/{{digits}}/ig, '{{.}}'); 
}); 

अब आप इस राशि और हमें यह देना चाहिए:

<h1>Black Book</h1> 
    <h3>6</h3> 
    <ul> 
    {{#hair}} 
    <li><a href="123">{{hair}}</a></li> 
    <li><a href="456">{{hair}}</a></li> 
    <li><a href="789">{{hair}}</a></li> 
    {{/hair}} 
    </ul> 

और यही वह जगह है जहां मेरा तर्क मर जाता है, हाहा। इस बारे में सोचने में कोई मदद चट्टान होगी! मुझे लगता है कि मैं {{hair}} ब्लॉक तत्वों को निकाल सकता हूं और सिर्फ $ .each pass content.girls और stack के माध्यम से पास कर सकता हूं। तीन बार बदलें। या मैं निम्नतम सामग्री के साथ शुरू करने की कोशिश कर सकता हूं, और अपना रास्ता तैयार कर सकता हूं। मुझे नही पता।

यह सब मूल रूप से मुझे आश्चर्यचकित करता है कि इस प्रकार के घोंसले के लिए कुछ "तर्क-रहित" तरीका है या मूंछ में डालने के लिए एकाधिक पास के माध्यम से हैंडलबार्स ऐसा करते हैं?