How to define mustache partials in HTML?

Question

this is my html:

  

&         


        

Answer 1

ICanHaz.js (ICH) can help you with this.

ICanHaz.js: A simple/powerful approach for doing client-side templating with Mustache.js.

I've found that mixing templates (in scripts tags) with the ordinary HTML in the page messes with my code editor (syntax highlighting, indenting etcetera). Loading them as a separate server keeps your HTML clean.

Check out this ICH pull request for automatic loading of from your server to one template per file.

You could also load more than one template per remote HTML file this using simple code like:

function getTemplates(url) {
    $.get(url, function (response) {
        $('template', response).each(function () {
           ich.addTemplate(this.id, $(this).text());
        });
    });
}

Or, if you'd like ICH to load them automatically from urls in your page:

$("link[type=templates]").each(function (index, link) {
    getTemplates(link.attr("href"));
});

In your my-templates.html