Need help with jquery-Mustache?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jonnyreeves
196 Stars 61 Forks MIT License 57 Commits 11 Opened issues

Description

Mustache templating plugin for jQuery

Services available

!
?

Need anything else?

Contributors list

# 38,546
HTML
Shell
stubs
grpc-we...
49 commits
# 145,546
React
iOS
Android
React N...
1 commit
# 351,543
JavaScr...
Ruby
Webpack
closure...
1 commit
# 564,934
JavaScr...
PHP
symfony...
websock...
1 commit
# 34,986
Python
aws-lam...
lambda
zappa
1 commit

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:

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
) and, once it's finished loading we render it out replacing the contents of the
body
element. Your templates should be defined in a script block in the external HTML file where the script block's id will define the template's name, eg:

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()
without any arguments, this will read in all templates from any
 blocks in your markup.

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

$.Mustache.render()
method or via the jQuery
mustache
selector:
$.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
selector defaults to appending the rendered template to the selected element; however you can change this behaviour by passing a
method
in the options argument:
// 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
selector also allows you to pass an Array of View Models to render which makes populating lists a breeze:
// 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()
and when you're done, you can call
$.Mustache.clear()
to remove all templates.

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.