微信小程序開發技術教程之Mustache語法要點總結

開發人員在做小程序開發的時候，會在wxml里，用到Mustache語法。而Mustache其實就是一個logic-less（輕邏輯）模板解析引擎，它是為了使用戶界面與業務數據（內容）分離而產生的，可生成特定格式的文檔，通常是標準的HTML文檔。小程序的wxml中的代碼編寫就會用到這種語法。所以，在開發小程序之前，開發者可以先研究一下Mustache語法的幾個模板，下面我們就一起來看一下這六大模板的內容。

  1、{{keyName}}

  這種Mustache語法的模板可以分成三種類型來說明，不同情況下就需要用到不同的寫法，它們分別為：

 （1）簡單的變量替換：{{name}}，示例代碼如下：

var data = { "name": "weChat" };

Mustache.render（"{{name}} is excellent."，data）;

成功返回

weChat is excellent.

 （2）變量含有html的代碼，如：“、”等而不想轉義，可以在用{{&name}}，示例代碼如下：

var data = {

     "name" : "<br>weChat<br>"

};

var output = Mustache.render("{{&name}} is excellent.", data);

console.log(output);

成功返回

<br>weChat<br> is excellent.

去掉“&”的返回是轉義為，還可以用{{{ }}}代替{{&}}。：

<br>weChat<br> is excellent.

 （3）聲明對象屬性，示例代碼為：

var data = {

               "name" : {

               "first" : "Chen"，

               "last" : "Jackson"

               }，

               "age" : 18

          };

var output = Mustache.render(

            "name:{{name.first}} {{name.last}}，age:{{age}}", data);

console.log(output);

返回

name:Chen Jackson，age:18

2、{{#keyName}} {{/keyName}}

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

var data = {

    "stooges" : [ {

        "name" : "Moe"

    }， {

        "name" : "Larry"

    }， {

        "name" : "Curly"

    } ]

};

var output = Mustache.render("{{＃stooges}}<b>{{name}}</b>{{/stooges}}"，

                 data);

console.log(output);

返回：

<b>Moe</b>

<b>Larry</b>

<b>Curly</b>

3、{{^keyName}} {{/keyName}}

這種語法模板與{{#keyName}} {{/keyName}}類似，其中的不同點，是這個模板中，當keyName值為null, undefined, false時才渲染輸出該區塊內容。示例代碼如下：

var data = {

              "name" : "<br>weChat<br>"

          };

     var tpl = ‘{{^nothing}}沒找到 nothing 鍵名就會渲染這段{{/nothing}}’;

     var output = Mustache.render(tpl, data);

返回：

沒找到 nothing 鍵名就會渲染這段

4、{{.}}

{{.}}這個模板表示的是枚舉，可以循環輸出整個數組，示例代碼如下：

var data = {

     "product": ["Macbook ","iPhone ","iPod ","iPad "]

}

var tpl = '{{#product}} <p>{{.}}</p> {{/product}}';

var html = Mustache.render(tpl, data);

返回：

<p>Macbook </p> <p>iPhone </p> <p>iPod </p> <p>iPad </p>

5、{{!  }}

{{!  }}這個模板表示的是注釋。

6、{{>partials}}

這個模板，是以>開始表示子模塊，當結構比較復雜時，使用該語法，可以將將復雜的結構，拆分成幾個小的子模塊。