Baffi, utilizzando modelli esterni

Question

Sto leggendo sui modelli con Mustache.js. Quello che non capisco è come è dove mettere i modelli. Non li faccio nello stesso file.

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

Devo creare un controller che restituisca il mio modello o posso fare riferimento a esso?

Answer 1

Ci sono diversi approcci per farlo.

1. Se si utilizza un linguaggio di scripting lato server come PHP, basta includere in un separato .mst (l'estensione potrebbe essere tutto quello che vuoi in realtà) file all'interno del JS. Ad esempio, var _templateName = <?= JS::mustache('content/templateName.mst') ?>;. Pertanto, quando il JS viene effettivamente renderizzato, verrà reso con il markup ma il codice sarà comunque mantenibile. Inoltre, con questo approccio, se stai utilizzando un CDN, il tuo sito trarrà grandi benefici con il JS memorizzato nella cache.
2. L'altro approccio consiste nel caricare file HTML esterni con uno qualsiasi dei metodi di jQuery $.get, $.getJSON, ecc. Un'implementazione più dettagliata di questo è given here.

Answer 2

È possibile inserire modelli in file separati come si fa con CSS e JS. È possibile utilizzare Chevron per caricare i modelli esterni da file in questo modo:

Si aggiunge in te modello di un link al tuo file di modello:

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

Poi, in voi js è possibile rendere il modello in questo 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) 
}); 

la documentazione di Chevron daranno altri esempi