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的數據必定要與鍵名相符合。