Question

I am reading about templating with Mustache.js. What i don’t understand is how is where to put the templates. I don’t wont them in the same 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>

Do I have to create a controller that returns my template or can i reference it?

Answer 1

There are several approaches to doing this.

1. If you are using a server side scripting language like PHP, just include them in a seperate .mst (the extension could be anything you want actually) file within the JS. For example,
   var _templateName = <?= JS::mustache('content/templateName.mst') ?>;. Thus, when the JS is actually rendered, it will be rendered with the markup but the code will still be maintainable. Besides, with this approach, if you’re using an CDNs, your site will benefit greatly with the cached JS.
2. The other approach is to load external HTML files with any of jQuery’s $.get, $.getJSON, etc. methods. A more detailed implementation of this is given here.