如何缓存小胡子模板？

我想缓存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

如何缓存小胡子模板？

回答

相关问题