我們將為大家詳解Mustache.js輕量級JavaScript模版引擎使用方法。
簡單示例
function show(t) {
$("#content").html(t);
}
var view = {
title: 'YZF',
cacl: function () {
return 6 + 4;
}
};
$("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));
可以很明顯的看出Mustache模板的語法，只需要使用{{和}}包含起來就可以了，裡面放上對象的名稱。
通過本示例也可以看出，如果指定的屬性為函數的時候，不會輸出函數裡面的內容，而是先執行函數，然後將返回的結果顯示出來。
不轉義HTML標簽
var view = {
name: "YZF",
company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));
通過這個示例可以看出Mustache默認是會將值裡面的html標記進行轉義的，但是有時候我們並不需要。
所以這裡我們可以使用{{{和}}}包含起來，或者是{{和}}包含，那麼Mustache就不會轉義裡面的html標記。
綁定子屬性的值
var view = {
"name": {
first: "Y",
second: "zf"
},
"age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));
相信看到第一個示例的時候，就會有人想到能不能綁定子屬性，如果你努力看下去了。那麼祝賀你，現在就是解決你的需求的方式，僅僅只需要通過.來使用子屬性即可。
條件式選擇是否渲染指定部分
var view = {
person: false
};
show(Mustache.render("eff{{#person}}abc{{/person}}", view));
問題總是不斷，如果我們還需要能夠根據我們給的值，決定是否渲染某個部分，那麼現在就可以解決這個問題，當然還要提示的就是不僅僅是false會導致不渲染指定部分。
null，空數組，0，空字符串一樣有效。語法上面比較簡單，就是使用{{#key}} ... {{/key}}來控制中間的內容。
循環輸出
var view = {
stooges: [
{ "name": "Moe" },
{ "name": "Larry" },
{ "name": "Curly" }
]
};
show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));
僅僅學會上面的方式，大部分地方你都解決了，但是還是會出現麻煩的地方，就是循環輸出，如果你一個一個寫，相信會很煩躁，當然Mustache不會讓我們失望，它也給出了如何循環輸出的方式，這裡是將一個由對象組成的數組輸出，如果我們輸出的是數組，就需要使用{{.}}來替代{{name}}。
循環輸出指定函數處理後返回的值
var view = {
"beatles": [
{ "firstname": "Johh", "lastname": "Lennon" },
{ "firstname": "Paul", "lastname": "McCartney" }
],
"name": function () {
return this.firstname + this.lastname;
}
};
show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));
循環輸出是有了，但是我們還想後期進行加工。那麼這個完全符合你的需要，因為Mustache會將數組中的值傳遞給你的函數，輸出你函數返回的值。這裡我們可以看到最外層是數組，只要在裡面使用函數那麼外層的數組就會作為這個函數的參數傳遞進去。
自定義函數
var view = {
"name": "Tater",
"bold": function () {
return function (text, render) {
return render(text) + "<br />";
}
}
}
show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));
上面我們都是用的變量作為節，那麼我們現在用函數作為節，會有什麼效果呢。
它會調用我們函數返回的函數，將節中間的原始字符串作為第一個參數，默認的解釋器作為第二個參數，那麼我們就可以自行加工。
反義節
var view = {
"repos": []
};
show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));
上面我們也用節，但是僅僅只能選擇是否輸出某個部分。所以這裡我們彌補一下。
如果我們使用了{{^和}}來定義節的話，那麼這個部分只會在裡面的值為空，null，空數組，空字符串的時候才會顯示。那麼我們就可以實現了if else的效果了。
部分模板
var view = {
names: [
{ "name": "y" },
{ "name": "z" },
{ "name": "f" }
]
};
var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
var name = "<b>{{name}}</b>";
show(Mustache.render(base, view, { user: name }));
Mustache雖然節約了很多時間，但是我們定義了很多模板，但是彼此之間無法互相嵌套使用，也會造成繁瑣。
所以這裡我們還要介紹如何定義部分模板，用來在其他模板裡面使用，這裡使用其他模板的方式僅僅是{{>templetename}}。
最大的不同就是Mustache.render方法有了第三個參數。
預編譯模板
Mustache.parse(template); //其他代碼 Mustache.render(template,view);
模板既然有好處，也有壞處。就是編譯模板需要時間，所以在我們已知會使用某個模板的前提下，我們可以預先編譯好這個模板，以便後面的使用。
希望本文所述對大家學習有所幫助。