Mustache學習

Mustache是基于JavaScript的一款模版Web引擎,Web 模板引擎是為了使用戶界面與業務數據(內容)分離而產生的,它可以生成特定格式的文檔,通常是標準的 HTML 文檔。

一、Mustache簡介

Mustache 是一個 logic-less (輕邏輯)模板解析引擎,它的優勢在于可以應用在 Javascript、PHP、Python、Perl 等多種編程語言中。

二、Mustache語法

1、{{keyName}}

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

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

4、{{.}}

5、{{<partials}}

6、{{{keyName}}}

7、{{!comments}}

三、demo介紹

1、{{keyName}}

var data={        name:"張三",        age:22,        sex:"girl"}var template="My name is {{name}},I'm {{age}} years old,I'm a {{sex}} !";var view=Mustache.render(template,data);document.getElementsByTagName("body")[0].innerHTML=view;

分析:{{keyName}}中的{{}}就是Mustache的標識符,keyName就是data對象中的鍵名,這句的作用是直接輸出與鍵名匹配的鍵值!

2、{{#keyName}} {{/keyName}} 有兩種用法:

第一種:

以"#"開始,"/"結束,被它們所包圍的標簽為進行循環多次渲染,keyName為需要循環渲染的數組名,代碼如下:

注意:這里的keyName表示需要表示需要循環渲染到html模版中的數組的數組名,

var obj={    result:[    {name:null,age:22,sex:"女"},    {name:"李四",age:22,sex:"男"},    {name:"王五",age:22,sex:"男"}]};var template="<table>"            +"<thead><tr><td>姓名</td><td>年齡</td><td>性別</td></tr></thead>"            +"<tbody>" +            "{{#result}}" +            "<tr>" +            "<td>{{name}}</td>" +            "<td>{{age}}</td>" +            "<td>{{sex}}</td>" +            "{{/name}}</tr>" +           "{{/result}}" +            "</tbody>"            +"</table>";var view=Mustache.render(template,obj);document.getElementsByTagName("body")[0].innerHTML=view;

上面的代碼對result數組進行了循環渲染,以{{#result}}開始,以{{/result}}結束,中間包裹著需要循環綁定數據的標簽!

第二種:

{{#keyName}} {{/keyName}}還有第二種用法,當keyName表示鍵名的時候,代碼如下:

注意:這里的keyName表示鍵名,并不表示需要循環的數組名

var obj={    result:[    {name:null,age:22,sex:"女"},    {name:"李四",age:22,sex:"男"},    {name:"王五",age:22,sex:"男"}]};var template="<table>"            +"<thead><tr><td>姓名</td><td>年齡</td><td>性別</td></tr></thead>"            +"<tbody>" +            "{{#result}}" +            "<tr>" +            "<td>{{#name}}{{name}}</td>" +            "<td>{{age}}</td>" +            "<td>{{sex}}{{/name}}</td>" +            "</tr>" +           "{{/result}}" +            "</tbody>"            +"</table>";var view=Mustache.render(template,obj);document.getElementsByTagName("body")[0].innerHTML=view;

分析代碼和提供的obj數據發現,result數組中的第一個對象的name屬性值為空,當我們使用{{#name}}{{/name}}將<tr></tr>包圍的時候,發現這個時候name為空的那一整行數據就被排除掉了,這了注意:根據{{#name}}{{/name}}放的位置的不同,會產生不同的效果!

3、{{^keyName}}{{/keyName}}? 與{{#keyName}}{{/keyName}}第二種用法的作用相反,代碼如下:

var obj={    result:[    {name:null,age:22,sex:"女"},    {name:"李四",age:22,sex:"男"},    {name:"王五",age:22,sex:"男"}]};var template="<table>"            +"<thead><tr><td>姓名</td><td>年齡</td><td>性別</td></tr></thead>"            +"<tbody>" +            "{{#result}}" +            "<tr>" +            "<td>{{^name}}</td>" +            "<td>{{age}}</td>" +            "<td>{{sex}}</td>" +            "</tr>{{/name}}" +           "{{/result}}" +            "</tbody>"            +"</table>";var view=Mustache.render(template,obj);document.getElementsByTagName("body")[0].innerHTML=view;

根據輸出和分析上面的代碼,發現{{^name}}{{/name}}再循環玩result對象數組后,只輸出了name值為null的那一行值!

4、{{.}}??? 表示枚舉,可以循環輸出整個數組,例如:

var obj={    result:["Macbook ","iPhone ","iPod ","iPad "]};var template="<p>{{#result}}<span>{{.}}</span>{{/result}}</p>";var view=Mustache.render(template,obj);document.getElementsByTagName("body")[0].innerHTML=view;

分析如上代碼和輸出發現:{{#result}}{{/result}}表示循環的目標是result數組,{{.}}則表示循環輸出result中的每一項

5、{{keyName.keyName}}?

var data={    company:["Microsoft"],    adress:{        province:"浙江",        city:"湖州",        county:"安吉",        town:"報福",        village:"統里"    }}var template="<h1>{{company}}</h1><ul>" +        "<li>{{adress.province}}</li>" +        "<li>{{adress.city}}</li>" +        "<li>{{adress.county}}</li>" +        "<li>{{adress.town}}</li>" +        "<li>{{adress.village}}</li>" +        "</ul>";var view=Mustache.render(template,data);document.getElementsByTagName("body")[0].innerHTML=view;