Mustache（摸-思達士）

Mustache 是一款「logic-less（輕邏輯）」的前端模板引擎，它原本是基於 javascript 實現的，但是因為輕量易用，所以經過拓展目前支持更多的平台，如 java，.NET，PHP，C++ 等。Mustache 主要用在表現和數據分離的項目中，根據數據生成特定的動態內容，這些內容在網頁中指的是HTML結構，而在小程序中則是WXML結構。
項目主頁：http://mustache.github.io/

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

1. {{keyName}}
2. {{{keyName}}}
3. {{#keyName}} {{/keyName}}
4. {{^keyName}} {{/keyName}}
5. {{.}}
6. {{!comments}}
7. {{>partials}}

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

<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>

 

1、{{keyName}}簡單的變量替換。

2、{{#keyName}} {{/keyName}}以#開始、以/結束表示區塊，它會根據當前上下文中的鍵值來對區塊進行一次或多次渲染。它的功能很強大，有類似if、foreach的功能。

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

4、{{.}} {{.}}表示枚舉，可以循環輸出整個數組

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

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

 

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