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="<div>{{#result}}<span>{{.}}</span>{{/result}}</div>";
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;