如何緩存小鬍子模板？

我想緩存mustache模板。如何緩存小鬍子模板？

我知道我可以包括mustache模板直接，就像這樣：

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

並調用那些使用JavaScript，像這樣：

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

這將不緩存模板。我唯一能想出的方法就是使用鏈接標籤，但如何通過javascript呼叫模板內容而不需要ajax請求？

這不會（當然）工作...

HTML

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

的Javascript

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

來源

2011-06-09 kaulusp

時做的這個問題很有意思！幾個月前，當我在一個rails項目中開始使用鬍子來處理'巨大'的前端模板時，我遇到了同樣的問題。

我結束了以下解決方案......

鬍子模板是一個公共文件夾中：

/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 
});

你可以注意到，第一次用戶需要的模板，有一個非同步請求（你可以做一個同步請求，如果你不希望包裹裏面回調一些其他的代碼）

我希望它可以幫助和我很樂意收到反饋/建議關於這個東西:)

來源

2011-06-09 23:47:58 stecb

你可以嘗試加載您的模板在iframe包含一個HTML頁面（將被緩存）與你所有的script標籤裏面。

然後，您可以從主頁面讀取它們，或者將它們從iframe推送到parent窗口。

這就是我使用pure.js模板

來源

2011-06-09 14:32:34 Mic

謝謝！很好的解決方法，但這對我來說似乎有點不好意思。歡迎所有其他建議。 – kaulusp 2011-06-09 15:41:18

我已經圍繞這個問題做了不少圓圈。一旦你通過創傷：'iframe'是你不應該使用的，一切都很好。但我期待着您會得到任何其他答案。 – Mic 2011-06-09 22:13:31

你說什麼也不會工作，當然，這是因爲關鍵字el的innerHTML屬性ement不會給你鏈接的內容。

您可以使用Chevron從鏈接加載外部模板，像這樣：

你加在你模板的鏈接到你的模板文件：

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

然後，在你JS，你可以使你的模板像這樣：

$("#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) 
});

雪佛龍的文檔會舉些例子

來源

2012-08-05 03:37:14

如何緩存小鬍子模板？

回答

相關問題