js模版引擎Mustache介紹

Mustache通常被稱為JavaScript模板的基礎。另一個流行的解決方案Hanldebars實際上就是基於Mustache構建而成的。這並不意味著Mustache是一個不好的模板解決方案。

下麵例舉一例：

Mustache.render("Hello, {{name}}", { name: "Jack" });
// 返回： Hello, Jack  

一旦在頁面中包含了Mustache，你就可以訪問全局對象“Mustache”。你可使用其中最主要的方法“render”，它包含兩個參數。首個參數是實際的模板，第二個參數則為需要傳入的參數值。

上例中，你可以看見“{{name}}”。其中的“{{}}”實際上為Mustache的語法，表示一個占位符。當Mustache對其進行編譯時，它將在傳入的對像中尋找“name”屬性，並用該屬性的值（該例中為“Jack”）來代替“{{name}}”。

在這裡，模板只為一個字元串，但如果你有一個更複雜的模板，該方法可能就不適用了。通常的解決方案是將模板放在“script”標簽中：

<script type="text/x-mustache" id="template">

<p>Hello, {{name}}</p> 

</script>  

然後，我們可以訪問的script標簽的內容。例如，使用jQuery，它很容易實現：

var temp = $("#template").html();  
Mustache.render(temp { name: "Jack" });  

// 返回： <p>Hello, Jack</p>  

給“script”一個瀏覽器無法理解的“type”屬性，瀏覽器就會忽略該Script，不將它作為JavaScript，也不會執行它。

你也可在模板中使用迴圈，如下麵這個模板：

{{#people}}  
    {{name}}  
{{/people}}  

傳遞數據：

{ people: [ { name: "Jack" }, { name: "Fred" } ] }  

你將得到“JackFred”字元串。

下載地址：http://www.csdn.net/article/2013-09-16/2816951-top-five-javascript-templating-engines