我們將為大家詳解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模板的語法，只需要使用{{和}}包含起來就可以了，里面放上對象的名稱。

通過本示例也可以看出，如果指定的屬性為函數(shù)的時(shí)候，不會(huì)輸出函數(shù)里面的內(nèi)容，而是先執(zhí)行函數(shù)，然后將返回的結(jié)果顯示出來。

不轉(zhuǎn)義HTML標(biāo)簽

var view = {
 name: "YZF",
 company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

通過這個(gè)示例可以看出Mustache默認(rèn)是會(huì)將值里面的html標(biāo)記進(jìn)行轉(zhuǎn)義的，但是有時(shí)候我們并不需要。

所以這里我們可以使用{{{和}}}包含起來，或者是{{和}}包含，那么Mustache就不會(huì)轉(zhuǎn)義里面的html標(biāo)記。

綁定子屬性的值

var view = {
 "name": {
 first: "Y",
 second: "zf"
 },
 "age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

相信看到第一個(gè)示例的時(shí)候，就會(huì)有人想到能不能綁定子屬性，如果你努力看下去了。那么祝賀你，現(xiàn)在就是解決你的需求的方式，僅僅只需要通過.來使用子屬性即可。

條件式選擇是否渲染指定部分

var view = {
 person: false
};
show(Mustache.render("eff{{#person}}abc{{/person}}", view));

問題總是不斷，如果我們還需要能夠根據(jù)我們給的值，決定是否渲染某個(gè)部分，那么現(xiàn)在就可以解決這個(gè)問題，當(dāng)然還要提示的就是不僅僅是false會(huì)導(dǎo)致不渲染指定部分。

null，空數(shù)組，0，空字符串一樣有效。語法上面比較簡單，就是使用{{#key}} ... {{/key}}來控制中間的內(nèi)容。

循環(huán)輸出

var view = {
 stooges: [
 { "name": "Moe" },
 { "name": "Larry" },
 { "name": "Curly" }
 ]
};
show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

僅僅學(xué)會(huì)上面的方式，大部分地方你都解決了，但是還是會(huì)出現(xiàn)麻煩的地方，就是循環(huán)輸出，如果你一個(gè)一個(gè)寫，相信會(huì)很煩躁，當(dāng)然Mustache不會(huì)讓我們失望，它也給出了如何循環(huán)輸出的方式，這里是將一個(gè)由對象組成的數(shù)組輸出，如果我們輸出的是數(shù)組，就需要使用{{.}}來替代{{name}}。

循環(huán)輸出指定函數(shù)處理后返回的值

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));

循環(huán)輸出是有了，但是我們還想后期進(jìn)行加工。那么這個(gè)完全符合你的需要，因?yàn)镸ustache會(huì)將數(shù)組中的值傳遞給你的函數(shù)，輸出你函數(shù)返回的值。這里我們可以看到最外層是數(shù)組，只要在里面使用函數(shù)那么外層的數(shù)組就會(huì)作為這個(gè)函數(shù)的參數(shù)傳遞進(jìn)去。

自定義函數(shù)

var view = {
 "name": "Tater",
 "bold": function () {
 return function (text, render) {
   return render(text) + "<br />";
 }
 }
}
show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

上面我們都是用的變量作為節(jié)，那么我們現(xiàn)在用函數(shù)作為節(jié)，會(huì)有什么效果呢。

它會(huì)調(diào)用我們函數(shù)返回的函數(shù)，將節(jié)中間的原始字符串作為第一個(gè)參數(shù)，默認(rèn)的解釋器作為第二個(gè)參數(shù)，那么我們就可以自行加工。

反義節(jié)

var view = {
 "repos": []
};
show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

上面我們也用節(jié)，但是僅僅只能選擇是否輸出某個(gè)部分。所以這里我們彌補(bǔ)一下。

如果我們使用了{(lán){^和}}來定義節(jié)的話，那么這個(gè)部分只會(huì)在里面的值為空，null，空數(shù)組，空字符串的時(shí)候才會(huì)顯示。那么我們就可以實(shí)現(xiàn)了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雖然節(jié)約了很多時(shí)間，但是我們定義了很多模板，但是彼此之間無法互相嵌套使用，也會(huì)造成繁瑣。

所以這里我們還要介紹如何定義部分模板，用來在其他模板里面使用，這里使用其他模板的方式僅僅是{{>templetename}}。

最大的不同就是Mustache.render方法有了第三個(gè)參數(shù)。

預(yù)編譯模板

Mustache.parse(template);
//其他代碼
Mustache.render(template,view);

模板既然有好處，也有壞處。就是編譯模板需要時(shí)間，所以在我們已知會(huì)使用某個(gè)模板的前提下，我們可以預(yù)先編譯好這個(gè)模板，以便后面的使用。

希望本文所述對大家學(xué)習(xí)有所幫助。

最新評論