jquery.mustache是用jquery做了一层封装，提供了以下几个方法，让模板使用更便捷。
1，添加模板的三种方式
add,
addfromdom
addfromstring
可以直接添加模板，无论是作为字符串文字或引用其他的dom元素
（1）template 是字符串直接量
//add仅仅是把template添加到当前页面，注意并没有渲染 $.mustache.add('string-template', '<p>hi, {{name}}, this is an inline template<p>');
（2）引用dom元素  addfromdom
// 两者是相同的，后者有更简洁的语法 these two are identical, the latter just provides a terser syntax. $.mustache.add('dom-template', $('#dom-template').html()); $.mustache.addfromdom('dom-template');
如果你更愿意将模板存储在dom中（假设从外部文件载入它们），此时你可以仅调用
$.mustache.addfromdom()，不用任何参数，这样的话将读取你模板中所有<script type=”text/html” />块。
（3）载入外部模板（html文件），然后渲染
a, 不依赖模块化的情况，直接使用自带的 $.mustache.load() 方法
var viewdata = { name: 'jonny' }; $.mustache.load('./templates/greetings.htm').done(function () {     $('body').mustache('simple-hello', viewdata); });
在上面的例子中，我们载入了外部模板（html文件），一旦载入成功，就渲染他里面的元素。
外部模板应该定义在script标签块中，script标签快的id将用来作为模板名称，本例中是simple-hello
// 详见下面
./templates/greetings.htm源码
<script id="simple-hello" type="text/html">     <p>hello, {{name}}, how are you?</p> </script>
b, 依赖模块化的情况，先使用require载入文件，再使用mustache读取文件内容(addfromstring)
//1，准备工作 require('jquerymustache'); var tpl = require(crownsheettpl); $.mustache.addfromstring(tpl); //2，使用 this.$el.empty().mustache('crownsheet-' + templatechoice + '-template',this.model);
2，渲染的两种方式
（1）全局的 $.mustache.render() 方法
$.mustache.render(‘my-template’, viewdata);
返回一个字符串（渲染后的模板内容）
（2）jquery的mustache选择器
$(“#someelement”).mustache(‘my-template’, viewdata);
返回一个jquery选择器链接。
这种方式默认的是将渲染后的模板内容追加到dom选择器元素中，但是你仍然可以改变这种行为，通过传递一个可选的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’ });
mustache选择器也允许你传一个模型数组，这使得你渲染数组变成轻而易举的事
（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. var viewmodels = [     { name: 'jonny' },     { name: 'nock' },     { name: 'lucy' } ];//注意是数组。 $('#somelist').empty().mustache('list-template', viewmodels);
首先清除somelist的内容，然后用数组viewmodels渲染到列表模板list-template中。
3，根据调试等需要的其他方法，如templates(), add(), clear()
为了便于调试，你可以使用$.mustache.templates()方法获取所有注册的模板。 //查看已add的所有模板 console.log($.mustache.templates()); //查询某一个模板是否存在 console.log($.mustache.has('string-template')); //你可以调用$.mustache.clear清除所有模板 $.mustache.clear(); //清除所有已add的模板，变空了 //经测试，已经空了 console.log($.mustache.templates());
4，最后，支持部分渲染 partials，只需要保证被提前载入
$.mustache.load('./templates/templates.htm').done(function () {     // 渲染`webcontent`模板 和 `footer-fragment`子模板.     $('body').mustache('webcontent', { year: 2012, adjective: 'epic' });  });
// 详见下面
./templates/templates.htm源码
<script id="footer-fragment" type="text/html">     <p>© jonny {{year}}</p> </script> <script id="webcontent" type="text/html">     <h1><blink>my {{adjective}} website!</blink></h1>     {{! insert the `footer-fragment` template below }}     {{>footer-fragment}} </script>
以上就是介绍jquery.mustache.js的使用实例的详细内容。