mustache.js Web模板引擎
示例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Js/mustache.js" type="text/javascript"></script>
<script type="text/javascript">
//通过以哈希值或者对象的方式扩展模板标签
var view = {
title: "Joe",
calc: function () {
return 2 + 4;
}
};
//Mustache.render 函数有2个参数: (1) mustache 模板和 (2)包含了需要渲染给模板的数据和代码的一个视图对象。
var output = Mustache.render("{{title}} spends {{calc}}", view);
document.write(output);
</script>
</head>
<body>
</body>
</html>
效果:
Joe spends 6
看了Mustache的github,学学此中的语法,做个笔记
1.简单的变量调换:{{name}}
var data = { "name": "Willy" };
Mustache.render("{{name}} is awesome.",data);
返回成果 Willy is awesome.
2.若是变量含有html的代码的,例如:<br>、<tr>等等而不想转义可以在用{{&name}}
var data = {
"name" : "<br>Willy<br>"
};
var output = Mustache.render("{{&name}} is awesome.", data);
console.log(output);
成果:<br>Willy<br> is awesome.成果:<br>Willy<br> is awesome.
去掉"&"的成果是转义为:<br>Willy<br> is awesome.(默认将"<"和">"转义)
3.若是是对象,还能申明其属性
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成果:name:Chen Jackson,age:18
4.{{#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!。若是nothin是空或者null,或者是false都邑输出Shown.相反则是Shown.Never shown!。
5.迭代
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>
6.若是迭代的是数组,还可以用{{.}}来调换每个元素
var data = {
"musketeers" : [ "Athos", "Aramis", "Porthos", "D""Artagnan" ]
};
var output = Mustache.render("{{#musketeers}}* {{&.}}{{/musketeers}}",
data);
console.log(output);
输出:* Athos
* Aramis
* Porthos
* D""Artagnan
7.迭代输出的还可所以一个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);
输出: *John Lennon
*Paul McCartney
*George Harrison
*Ringo Starr
8:办法里面可以再履行变量中的表达式
var data = {
"name" : "{{age}}" + "Tater",
"bold" : function() {
return function(text, render) {
console.log(text);
return "<b>" + render(text) + "</b>";
};
},
"age" : 18
};
var output = Mustache.render("{{#bold}}Hi {{name}}.{{/bold}}", data);
console.log(output);
输出成果:
Hi {{age}}Tater.