如何缓存胡子模板？

Question

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

这不会缓存模板.我能想出的唯一方法是使用link -tags,但如何在javascript没有ajax请求的情况下通过模板内容调用？

这当然不起作用......

HTML

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

使用Javascript

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

Answer 1

这个问题非常有趣!几个月前,当我开始在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
});

您可以注意到,第一次用户需要模板时,会出现异步请求(如果您不想在回调中包含其他一些代码,则可以发出同步请求)

我希望它可以提供帮助,我很乐意接收有关这些东西的反馈/建议:)