Mustache模板学习笔记
1 初体验1.1 还可以对象形式做数据源1.2 {{#param}}这个标签很强大，有if判断、forEach的功能。1.2.1 如果迭代的是数组，还可以用{{.}}来替代每个元素
1.3 迭代输出的还可以是一个function返回的结果，function可以读取当前变量的上下文来获取其他属性执行其他操作
1 初体验
首先先定义一个type="x-tmpl-mustache"的模板脚本并给与一个id
<script id
="paginateTemplate" type
="x-tmpl-mustache">
<p
> Hello
,{{name
}}</p
>
</script
>
其次再在html页面中定义一个div容器，并给一个id名
<div id="context"></div>
最后再在</body>前写javascript脚本做模板渲染
<script type
="text/javascript">
var data
= { "phone": "iphone" }
var Template
= $('#paginateTemplate').html();
var rendered
= Mustache
.render(Template
,data
);
$('#context').html(rendered
);
</script
>
1.1 还可以对象形式做数据源
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
1.2 {{#param}}这个标签很强大，有if判断、forEach的功能。
var data
= {
"nothin":true
};
var output
= Mustache
.render(
"Shown.{{#nothin}}Never shown!{{/nothin}}", data
);
console
.log(output
);
结果：如果nothin是空或者null，或者是false都会输出Shown.相反则是Shown.Never shown!。
下面是迭代功能的使用：
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>
1.2.1 如果迭代的是数组，还可以用{{.}}来替代每个元素
var data
= {
"musketeers" : [ "Athos", "Aramis", "Porthos", "D'Artagnan" ]
};
var output
= Mustache
.render("{{#musketeers}}* {{&.}}{{/musketeers}}",data
);
console
.log(output
);
输出： * Athos * Aramis * Porthos * D’Artagnan
1.3 迭代输出的还可以是一个function返回的结果，function可以读取当前变量的上下文来获取其他属性执行其他操作
var data
= {
"beatles" : [ {
"firstName" : "John",
"lastName" : "Lennon"
}, {
"firstName" : "Paul",
"lastName" : "McCartney"
}, {
"firstName" : "George",
"lastName" : "Harrison"
}, {
"firstName" : "Ringo",
"lastName" : "Starr"
} ],
"name" : function() {
return this.firstName
+ " " + this.lastName
;
}
};
var output
= Mustache
.render("{{#beatles}} *{{name}}{{/beatles}}", data
);
console
.log(output
);
9.{{^}}与{{#}}相反，如果变量是null、undefined、 false、和空数组讲输出结果
10.{{! }}注释
