Усы, используя внешние шаблоны

Question

Я читаю о шаблонах с Mustache.js. Я не понимаю, как разместить шаблоны. Я не хочу их в том же файле.

$.get('test.htm', function(templates) { 
    // Fetch the <script /> block from the loaded external 
    // template file which contains our greetings template. 
    var template = $(templates).filter('#tpl-greeting').html(); 
    $('body').append(Mustache.render(template, templateData)); 
}); 


//test.htm 
<script id="tpl-greeting" type="text/html"> 
<dl> 
    <dt>Name</dt> 
    <dd>{{name}}</dd> 
    <dt>Time</dt> 
    <dd>{{timeNow}}</dd> 
</dl> 
</script> 

Должен ли я создать контроллер, который возвращает мой шаблон, или я могу ссылаться на него?

Answer 1

Существует несколько подходов к этому.

1. Если вы используете на стороне сервера язык сценариев, как PHP, просто включить их в отдельном .mst (расширение может быть все, что вы хотите на самом деле) файл в JS. Например, var _templateName = <?= JS::mustache('content/templateName.mst') ?>;. Таким образом, когда JS фактически отображается, он будет отображаться с разметкой, но код по-прежнему будет поддерживаться. Кроме того, при таком подходе, если вы используете CDN, ваш сайт значительно выиграет от кэшированной JS.
2. Другой подход заключается в загрузке внешних HTML-файлов с помощью любых методов jQuery $.get, $.getJSON и т. Д. Более подробная информация об этом - given here.

Answer 2

Вы можете разместить шаблоны в отдельных файлах, например, с помощью CSS и JS. Вы можете использовать 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) 
}); 

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