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()，不用任何參數，這樣的話將讀取你模板中所有區塊。
（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的使用實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
