Mustache 是个不错的js模板引擎,源码:https://github.com/janl/mustache.js
mustache的一些说明:http://mustache.github.com/mustache.5.html
下面是自己总结的一些小说明
1、简单的变量替换{{name}}
eg:var data={"name":"Jhon"};var output= Mustache.render("{{name}} is awsome",data);
console.log(output);//Jhon is awsome.
2、若是变量中含有html代码,而又不想转义的,在变量前面加上&即可。{{&name}}
3、变量是对象时,还可以声明其属性:
eg:var data = { "name": {
"first":"Willy",
"last":"John"
},
"age":"18"};
var output=Mustache.render("{{name.first}} {{name.last}} is {{age}} years old.",data);
console.log(output);//Willy Jhon is 18 years old.
4、{{#param}}标签的功能很强大,有if判断、foreach的功能
eg1://判断
var data = {
"nothin":true
};
var output = Mustache.render(
"Shown.{{#nothin}}Never shown!{{/nothin}}", data);
console.log(output);//Shown.Never shown!
eg2:迭代
var data = {
"stooges":[{ "name" : "Moe" },
{ "name" : "Larry"},
{"name" : "Curly"}
]
};var output = Mustache.render("{{#stooges}} {{name}} {{/stooges}}",data);
console.log(output);// Moe Larry Curly
若迭代的是数组,还可以通过{{.}}来调换每个元素
eg3://数组迭代
var data = {
"musketeers":[ "Athos", "Aramis", "Porthos", "D","Artagnan" ]
};
var output = Mustache.render("{{#musketeers}} * {{.}} {{/musketeers}}",
data);
console.log(output);// * Athos * Aramis * Porthos * D * Artagnan
5、迭代输出还可以是一个function返回的结果:
var data = {
"beatles" : [ {
"firstName" : "John",
"lastName" : "Lennon"
}, {
"firstName" : "Paul",
"lastName" : "McCartney"
} ],
"name" : function() {
return this.firstName + " " + this.lastName;
}
};
var output = Mustache.render("{{#beatles}} *{{name}} {{/beatles}}", data);
console.log(output);//*John Lennon *Paul McCartney
6、{{^}}与{{#}}相反,若变量是null、undefined、 false、和空数组则执行相应操作,相当于提供了一个错误处理机制
{{#repo}}
<b>{{name}}</b>
{{/repo}}
{{^repo}}
No repos :(
{{/repo}}
7、 {{! }}注释
8、包含
base.mustache:
<h2>Names</h2>
{{#names}}
{{> user}}
{{/names}}
user.mustache:
<strong>{{name}}</strong>
上述代码等价于:
<h2>Names</h2>
{{#names}}
<strong>{{name}}</strong>
{{/names}}