jQuery-Mustache - A jQuery Plugin for working with Mustache.js

jQuery-Mustache.js is a jQuery Plugin which makes working light work of using the Mustache templating engine via a bit of jQuery magic.

Installation

jQuery-Mustache has two dependencies:

• jQuery 1.5 or later.
• Mustache.js 0.4 or later.

As with all jQuery plugins, just ensure that you load jQuery before you load jQuery-mustache.js, for example:

Usage

Lets get down to it and load an external template and then render it.

var viewData = { name: 'Jonny' };
$.Mustache.load('./templates/greetings.htm')
    .done(function () {
        $('body').mustache('simple-hello', viewData);
    });

In the above example we are loading an external template HTML file (

greetings.htm

body

You can also add templates directly either as String literals or by referencing other DOM elements, eg:

$.Mustache.add('string-template', '
Hi, {{name}}, this is an inline template
');

// These two are identical, the latter just provides a terser syntax.
$.Mustache.add('dom-template', $('#dom-template').html());
$.Mustache.addFromDom('dom-template');

If you prefer to have all your templates stored in the DOM (as opposed to loading them from external files) then you can just call

$.Mustache.addFromDom()

There are two ways to render a Mustache template, either via the global

$.Mustache.render()

mustache

$.Mustache.render('my-template', viewData);     // Returns a String (the rendered template content)
$('#someElement').mustache('my-template', viewData);    // Returns a jQuery selector for chaining.

The jQuery

mustache

method

// Replace the contents of #someElement with the rendered template.
$('#someElement').mustache('my-template', viewData, { method: 'html' });

// Prepend the rendered Mustache template to #someElement.
$('#someElement').mustache('my-template', viewData, { method: 'prepend' });

The

mustache

// Clear #someList and then render all the viewModels using the list-template.
$('#someList).empty().mustache('list-template', viewModels);

To help you debug you can fetch a list of all registered templates via

$.Mustache.templates()

$.Mustache.clear()

jQuery-Mustache plays nicely with partials as well, no muss, no fuss, just drop the partial into your template, ensure that it's been loaded and jQuery-Mustache will take care of the rest:

$.Mustache.load('templates.htm')
    .done(function () {
        // Renders the webcontent template and the footer-fragment template to the page.
        $('body').mustache('webcontent', { year: 2012, adjective: 'EPIC' }); 
    });

Check out the included example file for other usage scenarios.