mustache 模板，用於構造html頁面內容。在實際工作中，當同一個模板中想要調用不同的函數來渲染畫面，在已經自定義好了的前提下，可以在渲染頁面時對傳入的參數進行手動判斷。【在不好判斷的情況下，我們可以通過改變傳入參數來進行判斷】跟小白我來看看該模板的語法吧。 Mustache 的模板語法很簡單 ...
mustache 模板，用於構造html頁面內容。在實際工作中，當同一個模板中想要調用不同的函數來渲染畫面，在已經自定義好了的前提下，可以在渲染頁面時對傳入的參數進行手動判斷。【在不好判斷的情況下，我們可以通過改變傳入參數來進行判斷】跟小白我來看看該模板的語法吧。
Mustache 的模板語法很簡單，就那麼幾個：
{{data}}
{{#data}} {{/data}}
{{^data}} {{/data}}
{{.}}
{{<partials}}
{{{data}}}
{{!comments}}
藉助 Demo 來對語法做簡單的介紹：
1 ... 2 <script type="text/javascript" src="mustache.js"></script> 3 <script type="text/javascript"> 4 var data = { 5 "name": " xiaohua ", 6 "msg": { 7 "sex": " female ",
8 "age": " 22 ",
9 "hobit": " reading "
10 }, 11 "subject": ["Ch","En","Math","physics"] 12 }
13
14 var tpl = '<p> {{name}}</p>'; 15 var html = Mustache.render(tpl, data);
16 17 alert ( html ); 18 </script> 19 ...
{{data}}
{{}}就是 Mustache 的標示符，花括弧里的 data 表示鍵名，這句的作用是直接輸出與鍵名匹配的鍵值，例如：
1 var tpl = '{{name}}'; 2 var html = Mustache.render(tpl, data); 3 //輸出： 4 xiaohua
{{#data}} {{/data}}
以#開始、以/結束表示區塊，它會根據當前上下文中的鍵值來對區塊進行一次或多次渲染，例如改寫下 Demo 中的 tpl：
1 var tpl = '{{#msg}} <p>{{sex}},{{age}},{{hobit}}</p> {{/msg}}'; 2 var html = Mustache.render(tpl, data); 3 4 //輸出： 5 <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}}；當結構比較複雜時，我們可以使用該語法將複雜的結構拆分成幾個小的子模塊，例如：
1 var tpl = "<h1>{{namme}}</h1> <ul>{{>msg}}</ul>" 2 var partials = {msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg} 3 var html = Mustache.render(tpl, data, partials); 4 //輸出： 5 <h1>xiaohua</h1> 6 <ul> 7 <li>female</li> 8 <li>22</li> 9 <li>reading</li> 10 </ul>
{{{data}}}
{{data}}輸出會將等特殊字元轉譯，如果想保持內容原樣輸出可以使用{{{}}}，例如：
1 var tpl = '{{#msg}} <p>{{{age}}}</p> {{/msg}}' 2 //輸出： 3 <p>22</p>
{{!comments}}
!表示註釋，註釋後不會渲染輸出任何內容。
1 {{!這裡是註釋}} 2 //輸出：
在工作中，如果頁面上的內容是從後臺獲取數據並渲染到頁面上時，我們就可以使用mustache模板了，值得註意的是，render的數據一定要與鍵名相符合。
