बाहरी टेम्पलेट्स का उपयोग करके मूंछ

Question

मैं Mustache.js के साथ templating के बारे में पढ़ रहा हूँ। मुझे समझ में नहीं आता कि टेम्पलेट्स कहां रखा जाए। मैं उन्हें एक ही फाइल में नहीं रखता हूं।

$.get('test.htm', function(templates) { 
    // Fetch the <script /> block from the loaded external 
    // template file which contains our greetings template. 
    var template = $(templates).filter('#tpl-greeting').html(); 
    $('body').append(Mustache.render(template, templateData)); 
}); 


//test.htm 
<script id="tpl-greeting" type="text/html"> 
<dl> 
    <dt>Name</dt> 
    <dd>{{name}}</dd> 
    <dt>Time</dt> 
    <dd>{{timeNow}}</dd> 
</dl> 
</script> 

क्या मुझे एक नियंत्रक बनाना है जो मेरा टेम्पलेट लौटाता है या क्या मैं इसका संदर्भ दे सकता हूं?

Answer 1

ऐसा करने के कई दृष्टिकोण हैं।

1. आप PHP जैसे एक सर्वर साइड पटकथा भाषा का उपयोग कर रहे हैं, तो सिर्फ उन्हें एक अलग .mst में शामिल जे एस के भीतर फ़ाइल (विस्तार आप वास्तव में चाहते हैं कुछ भी हो सकता है)। उदाहरण के लिए, var _templateName = <?= JS::mustache('content/templateName.mst') ?>;। इस प्रकार, जब जेएस वास्तव में प्रस्तुत किया जाता है, तो इसे मार्कअप के साथ प्रस्तुत किया जाएगा लेकिन कोड अभी भी बनाए रखा जा सकता है। इसके अलावा, इस दृष्टिकोण के साथ, यदि आप सीडीएन का उपयोग कर रहे हैं, तो आपकी साइट कैश किए गए जेएस के साथ बहुत लाभान्वित होगी।
2. दूसरा दृष्टिकोण बाहरी HTML फ़ाइलों को किसी भी jQuery के $.get, $.getJSON, आदि विधियों के साथ लोड करना है। इसका एक और विस्तृत कार्यान्वयन given here है।

Answer 2

आप टेम्पलेट्स को अलग-अलग फाइलों में डाल सकते हैं जैसे आप सीएसएस और जेएस के साथ करते हैं। तुम इतनी तरह फाइलों से बाहरी टेम्पलेट्स लोड करने के लिए Chevron उपयोग कर सकते हैं:

आप जोड़ने में आप अपने टेम्पलेट फ़ाइल के लिए एक लिंक टेम्पलेट:

<link href="path/to/template.mustache" rel="template" id="templateName"/> 

उसके बाद, आप में जेएस तुम इतनी तरह अपने टेम्पलेट प्रदान कर सकते हैं:

$("#templateName").Chevron("render", {name: "Slim Shady"}, function(result){ 
    // do something with 'result' 
    // 'result' will contain the result of rendering the template 
    // (in this case 'result' will contain: My name is Slim Shady) 
}); 

शेवरॉन की डॉक्स और उदाहरण