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;