मूंछ टेम्पलेट कैश कैसे करें?

Question

मैं mustache टेम्पलेट्स को कैश करना चाहता हूं।

मुझे पता है कि मैं सीधे mustache टेम्पलेट्स, इस तरह शामिल हो सकते हैं:

<script id="mustache-template" type="text/html"> 
<h1>{{title}}</h1> 
</script> 

और इस तरह जावास्क्रिप्ट के साथ उन लोगों, फोन:

var html, template, data; 
data = { 
    title : "Some title" 
}; 
template = document.getElementById('mustache-template').innerHTML; 
html = Mustache.to_html(template, data); 

यह नहीं होगा कैश टेम्पलेट्स। एकमात्र तरीका जिसे मैं समझ सकता हूं लिंक -टैग का उपयोग है, लेकिन अनुरोध के बिना मैं javascript के माध्यम से टेम्पलेट सामग्री को कैसे कॉल करूं?

यह (बेशक) काम नहीं करेगा ...

एचटीएमएल

<link type="text/html" href="/mustache/template.tpl" id="mustache-template" /> 

जावास्क्रिप्ट

document.getElementById('mustache-template').innerHTML; 

Answer 1

का उपयोग कर मैं क्या कर यह सवाल बहुत ही दिलचस्प है! कई महीनों पहले मुझे एक ही समस्या थी जब मैंने रेल परियोजना के भीतर 'विशाल' फ्रंट एंड टेम्पलेटिंग के लिए मूंछ का उपयोग शुरू किया।

मैं निम्नलिखित समाधान के साथ समाप्त हो गया ...

---

मूंछें टेम्पलेट्स एक सार्वजनिक फ़ोल्डर के अंदर कर रहे हैं:

/public/templates/_template_name.tpl 

जब भी मैं एक टेम्पलेट की जरूरत है मैं इस सहायक है getTemplate जो कुछ सामान करता है (कुछ mootools है, लेकिन टिप्पणियां भी हैं):

// namespace.templatesCache is an object ({}) defined inside the main app js file 

var 
    needXHR = false, // for callback function 
    templateHTML = ""; //template html 

if(!(templateHTML = namespace.templatesCache[template_name])){ //if template is not cached 

    templateHTML = (this.helpers.supportLocalStorage) ? localStorage.getItem(template_name) : ""; //if browser supports local storage, check if I can retrieve it 

    if(templateHTML === "" || templateHTML === null){ // if I don't have a template (usually, first time), retrieve it by ajax 

     needXHR = true; 

     new Request.HTML({ //or jQuery's $.get(url /*, etc */) 

      url: namespace.URLS.BASE+"templates/_"+template_name+".tpl", // url of the template file 

      onSuccess : function(t, e, html, js){ 

       namespace.templatesCache[template_name] = html; //cache it 

       if(_this.helpers.supportLocalStorage){ //and store it inside local storage, if available 
        localStorage.setItem(template_name,html); 
       } 

       //call callback  
      } 
     }).get(); 

    }else{ //retrieved by localStorage, let's cache it 

     namespace.templatesCache[template_name] = templateHTML; 

    } 

} 

if(!needXHR){ // I retrieved template by cache/localstorage, not by Ajax 

    //call callback  

} 

और मैं इस तरह से यह सहायक फोन:

namespace.helpers.getTemplate('template_name', function(templateHTML){ 
    // the callback function 
}); 

आप देख सकते हैं कि पहली बार उपयोगकर्ता टेम्पलेट की जरूरत है, वहाँ एक asynch अनुरोध है (यदि आप एक सिंक अनुरोध कर सकता है अगर यू नहीं चाहता कॉलबैक अंदर कुछ अन्य कोड)

मुझे आशा है कि यह मदद कर सकता है रैप करने के लिए और मैं इस सामान :) विषय में फीडबैक/सुझाव प्राप्त करने में खुशी होगी

Answer 2

आप एक में अपने टेम्पलेट लोड करने के लिए कोशिश कर सकते iframe जिसमें आपके सभीके साथ एक HTML पृष्ठ (जिसे कैश किया जाएगा) शामिल हैअंदर टैग।

फिर आप उन्हें मुख्य पृष्ठ से पढ़ सकते हैं, या उन्हें iframe से parent विंडो पर धक्का दे सकते हैं।

है कि जब pure.js टेम्पलेट्स

Answer 3

तुमने क्या कहा यह काम नहीं करेगा, ज़ाहिर है, क्योंकि liknek एल के आंतरिक HTML विशेषता ईमेंट आपको लिंक की सामग्री नहीं देगा।

तुम इतनी तरह के लिंक से बाहरी टेम्पलेट्स लोड करने के लिए 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) 
}); 

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