Mustache 的模板語法很簡單，就那麽幾個：

...
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
var data = {
"name": " xiaohua ",
"msg": {
"sex": " female ",
"age": " 22 ",
"hobit": " reading "
},
"subject": ["Ch","En","Math","physics"]
}

var tpl = ‘<p> {{name}}</p>‘;
var html = Mustache.render(tpl, data);

　alert ( html );
</script>
...

{{data}}

{{}}就是 Mustache 的標示符，花括號裏的 data 表示鍵名，這句的作用是直接輸出與鍵名匹配的鍵值，例如：

 var tpl = ‘{{name}}‘;
 var html = Mustache.render(tpl, data);
 //輸出：
 xiaohua

{{#data}} {{/data}}

以#開始、以/結束表示區塊，它會根據當前上下文中的鍵值來對區塊進行一次或多次渲染，例如改寫下 Demo 中的 tpl：

 var tpl = ‘{{#msg}} <p>{{sex}},{{age}},{{hobit}}</p> {{/msg}}‘;
 var html = Mustache.render(tpl, data);
 
 //輸出：
 <p> female, 22, reading</p>
註意：如果{{#data}} {{/data}}中的 data 值為 null, undefined, false；則不渲染輸出任何內容。

{{^data}} {{/data}}

該語法與{{#data}} {{/data}}類似，不同在於它是當 data值為 null, undefined, false 時才渲染輸出該區塊內容。

1 var tpl = {{^nothing}}沒找到 nothing 鍵名就會渲染這段{{/nothing}};
2 var html = Mustache.render(tpl, data);
3 //輸出：
4 沒找到 nothing 鍵名就會渲染這段

{{.}}

{{.}}表示枚舉，可以循環輸出整個數組，例如：

1 var tpl = ‘{{#subject}} <p>{{.}}</p> {{/subject}}‘;
2 var html = Mustache.render(tpl, data);
3 //輸出：
4 <p>Ch</p> <p>En</p> <p>Math</p> <p>physics</p>

{{>partials}}

以>開始表示子模塊，如{{> msg}}；當結構比較復雜時，我們可以使用該語法將復雜的結構拆分成幾個小的子模塊，例如：

var tpl = "<h1>{{namme}}</h1> <ul>{{>msg}}</ul>"
var partials = {msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg}
var html = Mustache.render(tpl, data, partials);
//輸出：
<h1>xiaohua</h1>
<ul>
<li>female</li>
<li>22</li>
<li>reading</li>
</ul>

{{{data}}}

{{data}}輸出會將等特殊字符轉譯，如果想保持內容原樣輸出可以使用{{{}}}，例如：

1 var tpl = ‘{{#msg}} <p>{{{age}}}</p> {{/msg}}‘
2 //輸出：
3 <p>22</p>

{{!comments}}

!表示註釋，註釋後不會渲染輸出任何內容。

1 {{!這裏是註釋}}
2 //輸出：

mustache 模板，用於構造html頁面內容