Based on mustache.js and mostly compatible with jquery-Mustache, this is a project that wraps Mustache in extra jQuery goodness in one single file. Without this, there's a bit too much extra magic to do exactly right to get it all to load and minify. This is just convenience.

The plugin loads just fine without require.js, but the main purpose of this version is to be AMD compatible.

The only dependency is jQuery.

You can either use $.Mustache:

require(['jquery', 'jquery.mustache'], function($) {
	$.Mustache.load('template.mustache', function() {
		...
	})
}

or load the same variable as a parameter to the callback:

require(['jquery', 'jquery.mustache'], function($, $mustache) {
	$mustache.load('template.mustache', function() {
		...
	})
}

or, as dependency (with or without $mustacheobject):

define(['jquery', 'lib/jquery.mustache'], function($, $mustache) {
	...
}

This document will use the $.Mustache style in examples, but it's the same object.

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.mustache.js"></script>

Only $.Mustache is available.

Adds a template to the template cache, for future use.

$.Mustache.add('added-template', '<p>{{test}}</p>');
var html = $.Mustache.render('added-template', {test: 'Replaced value'});

Reads templates from the current document. Takes an id or a list of ids to find, or if no argument, looks for <script type="text/html"> elements and loads those as templates. The templates must always have a unique id attribute.

<script type="text/html" id="inline-template">
	<p>{{test}}</p>
</script>

$.Mustache.addFromDom('inline-template');
var html = $.Mustache.render('inline-template', {test: 'Replaced value'});

Remove all added templates from cache.

$.Mustache.clear();

Check for existence of added template.

$.Mustache.addFromDom('inline-template');
if($.Mustache.has('inline-template')) {
	...
}

The mustache.js instance.

Loads a template file using AJAX. otherwise works as addFromDomwith no parameters, finds all <script type="text/html"> in the HTML and adds them as templates. Has an optional callback that is executed after the templates are loaded.

Also returns the jqxhr object from jQuery's $.get(), but beware that it may fire before the templates are read into cache, as it fires when the AJAX call is done. Mostly useful for fail() callback.

$.Mustache.load('template.mustache', function() {
	$.Mustache.render(...);
});

Remove a template.

$.Mustache.remove('template');

Render a template. See mustache.js for the actual rules.

$.Mustache.add('added-template', '<p>{{test}}</p>');
var html = $.Mustache.render('added-template', {test: 'Replaced value'});

List the added templates.

var templates = $.Mustache.templates();

jQuery plugin version, render a template into the object.

var $renderIntoMe = $('#render-into-me');
$renderIntoMe.mustache('template', {test: 'Replaced value'});

Uses append() by default, but can be overridden by adding an option "method" such as "html" or "prepend".

var $renderIntoMe = $('#render-into-me');
$renderIntoMe.mustache('template', {test: 'Replaced value'}, {method: 'html'});

The plugin handles partials, as long as the partial is also loaded into the cache. Put the templates and partials all into one file and load them in one go and you're set. :)

The API is (almost) copied from jquery-Mustache, since I used that first and liked it.

There are currently no options, but rather sane defaults:

• warnOnMissingTemplates - always fail instead, wrap in try/catch if needed.
• allowOverwrite - always allowed. Check with has() if needed.
• domTemplateType - always 'text/html'
• externalTemplateDataType - not used (but let me know if it is necessary!)

addFromDom() needs one string, or an array of strings instead of just looping the special arguments array. This may change if important.

Templates are pre-parsed as they are added.

The rest is (hopefully) implemented as documented and actually used, but see also the test suite.

Install Node.js and Jake

Download latest mustache.js from github with

jake update

Build the finished jquery.mustache.js with

jake build

The tests are written using QUnit.

Run the project in a web server and open test/with_require.html and test/no_require.html in a browser. The load() method will fail without a web server.