開發人員在做小程序開發的時候,會在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}}
這個模板,是以>開始表示子模塊,當結構比較復雜時,使用該語法,可以將將復雜的結構,拆分成幾個小的子模塊。