Как кэшировать шаблоны усов?

Я хотел бы кэшировать шаблоны 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);

Это не будет кэшировать шаблоны. Единственный способ, который я мог бы выяснить, это использовать ссылки -tags, но как я могу называть содержимое шаблона через javascript без запроса ajax?

Это не сработает (конечно)...

HTML

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

Javascript

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

Ответ 1

Этот вопрос очень интересный! У меня была такая же проблема несколько месяцев назад, когда я начал использовать усы для "огромных" шаблонов front-end в проекте рельсов.

У меня получилось следующее решение...

Шаблоны Усы находятся в общей папке:

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

Вы можете заметить, что первому пользователю нужен шаблон, есть асинхронный запрос (вы можете сделать запрос синхронизации, если вы не хотите обертывать какой-либо другой код внутри обратного вызова)

Я надеюсь, что это может помочь, и я хотел бы получать отзывы/предложения по этому поводу:)

Ответ 2

Вы можете попробовать загрузить свой шаблон в iframe, который содержит HTML-страницу (которая будет кэшироваться) со всеми вашими тегами script внутри.

Затем вы можете прочитать их с главной страницы или вывести их из iframe в окно parent.

Это то, что я делаю при использовании pure.js templates

Ответ 3

То, что вы говорите, конечно, не будет работать, потому что атрибут innerHTML элемента liknek не даст вам содержимое ссылки.

Вы можете использовать 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)
});

Документы Chevron приведут больше примеров