mustache語法

mustache 模板，用於構造html頁面內容。在實際工作中，當同一個模板中想要調用不同的函數來渲染畫面，在已經自定義好了的前提下，可以在渲染頁面時對傳入的參數進行手動判斷。【在不好判斷的情況下，我們可以通過改變傳入參數來進行判斷】跟小白我來看看該模板的語法吧。

 

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

    {{data}}
    {{#data}} {{/data}}
    {{^data}} {{/data}}
    {{.}}
    {{<partials}}
    {{{data}}}
    {{!comments}}

借助 Demo 來對語法做簡單的介紹：

...
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
var data = {
    "name": " xiaohua ",
    "msg": {
        "sex": " female ", 
 8         "age": " 22 ", 
 9         "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 時才渲染輸出該區塊內容。

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

{{.}}

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

var tpl = '{{#subject}} <p>{{.}}</p> {{/subject}}';
var html = Mustache.render(tpl, data);
//輸出：
<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}}輸出會將等特殊字符轉譯，如果想保持內容原樣輸出可以使用{{{}}}，例如：

var tpl = '{{#msg}} <p>{{{age}}}</p> {{/msg}}'
//輸出：
<p>22</p>

{{!comments}}

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

{{!這里是注釋}}
//輸出：

 

在工作中，如果頁面上的內容是從后台獲取數據並渲染到頁面上時，我們就可以使用mustache模板了，值得注意的是，render的數據一定要與鍵名相符合。