Javascript 如何缓存胡须模板？

我想缓存

胡须

模板

我知道我可以直接包括

胡须
模板，如下所示：

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

这不会缓存模板。我唯一能弄清楚的方法是使用链接标签，但是如果没有
ajax
请求，我如何通过
javascript
调用模板内容？

这（当然）行不通

HTML

您可以尝试将模板加载到
iframe
中，该框架包含一个HTML页面（将被缓存），其中包含所有
script
标记

然后，您可以从主页上读取它们，或将它们从iframe推送到父窗口

这就是我在使用模板时所做的
这个问题非常有趣！几个月前，当我开始在rails项目中使用“大”前端模板时，我也遇到了同样的问题

我最终得到了以下解决方案


胡须模板位于公用文件夹中：

每当我需要一个模板时，我都会有一个助手getTemplate来做一些事情（有一些mootools，但也有注释）：

我这样称呼这个助手：

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

您可以注意到，当用户第一次需要模板时，会有一个异步请求（如果您不想在回调中封装其他代码，可以发出一个同步请求）

我希望它能有所帮助，我也希望收到关于这方面的反馈/建议：）
当然，你说的不会起作用，因为liknek元素的innerHTML属性不会提供链接的内容

您可以使用以下链接加载外部模板：

在模板中添加指向模板文件的链接：

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

雪佛龙的文档将提供更多示例
谢谢！很好的解决方法，但对我来说这似乎有点老套。欢迎所有其他建议。我已经围绕这个问题绕了好几圈。一旦你通过创伤：
iframe
是你不应该使用的东西，一切都很好。但我期待着你能得到任何其他答案。
/public/templates/_template_name.tpl

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

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