Bigote, usando plantillas externas

Question

Estoy leyendo acerca de la creación de plantillas con Mustache.js. Lo que no entiendo es cómo es dónde poner las plantillas. No los uso en el mismo archivo.

$.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> 

¿Tengo que crear un controlador que devuelva mi plantilla o puedo hacer referencia a ella?

Answer 1

Hay varios enfoques para hacer esto.

1. Si está utilizando un lenguaje de script del lado del servidor como PHP, simplemente ellos incluyen en una separada .mst (la extensión podría ser cualquier cosa que desee en realidad) presentar dentro de la JS. Por ejemplo, var _templateName = <?= JS::mustache('content/templateName.mst') ?>;. Por lo tanto, cuando el JS se representa en realidad, se representará con el marcado, pero el código seguirá siendo mantenible. Además, con este enfoque, si usa un CDN, su sitio se beneficiará enormemente con el JS en caché.
2. El otro enfoque es cargar archivos HTML externos con cualquiera de los métodos de jQuery $.get, $.getJSON, etc. Una implementación más detallada de esto es given here.

Answer 2

Puede colocar plantillas en archivos separados como lo hace con CSS y JS. Puede utilizar Chevron para cargar plantillas externas de los archivos de este modo:

se agrega en usted plantilla de un enlace a su archivo de plantilla:

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

Luego, en que JS puede hacer que la plantilla de este modo:

$("#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) 
}); 

los documentos de Chevron darán más ejemplos