探究Javascript模板引擎mustache.js使用方法_javascript技巧

我們將為大家詳解Mustache.js輕量級J​​avaScript模版引擎使用方法。

簡單範例

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 id="Names">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);

模板既然有好處，也有壞處。就是編譯模板需要時間，所以在我們已知會使用某個模板的前提下，我們可以預先編譯這個模板，以便後面的使用。

希望本文所述對大家學習有所幫助。