mustache 模板,用于构造html页面内容。在实际工作中,当同一个模板中想要调用不同的函数来渲染画面,在已经自定义好了的前提下,可以在渲染页面时对传入的参数进行手动判断。
Mustache 的模板语法很简单,就那么几个:
{{data}}
{{#data}} {{/data}}
{{^data}} {{/data}}
{{.}}
{{>partials}}
{{{data}}}
{{!comments}}
先来一个简单demo,亲测无bug:
<!DOCTYPE html>
<html>
<head>
<title>Event Delegation Example</title>
<!-- CDN引用mustache.js引擎 -->
<script type="text/javascript" src="https://cdn.bootcss.com/mustache.js/3.0.1/mustache.js"></script>
</head>
<body>
<script type="text/javascript">
var data = {
"name": " xiaohua ",//name,msg,subject是键名
"msg": {
"sex": " female ",
"age": " 22 ",
"hobit": " reading "
},
"subject": ["Ch","En","Math","physics"]
}
var tpl = "<div>{{name}}</div>";
var res = Mustache.render(tpl, data);
document.write(res);
</script>
</body>
</html>
1、{{data}}
{{}}
就是 Mustache 的标示符,花括号里的 data 表示键名,这句的作用是直接输出与键名匹配的键值,例如:
var tpl = '{{name}}';
var res = Mustache.render(tpl, data);
document.write(res);
//输出:xiaohua
2、{{#data}} {{/data}}
以#
开始、以/
结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染,例如改写下 Demo 中的 tpl:
var tpl = '{{#msg}} <p>{{sex}},{{age}},{{hobit}}</p> {{/msg}}';
var res = Mustache.render(tpl, data);
document.write(res);
//输出:female, 22, reading
注意:如果{{#data}} {{/data}}
中的 data 值为 null, undefined, false;则不渲染输出任何内容。
3、{{^data}} {{/data}}
该语法与{{#data}} {{/data}}
类似,不同在于它是当 data值为 null, undefined, false 时才渲染输出该区块内容。
var tpl = '{{^nothing}} 没找到nothing键名就会渲染这段 {{/nothing}}';
var res = Mustache.render(tpl, data);
document.write(res);
//输出:没找到nothing键名就会渲染这段
4、{{.}}
{{.}}
表示枚举,可以循环输出整个数组,例如:
var tpl = '{{#subject}} <p>{{.}}</p> {{/subject}}';
var res = Mustache.render(tpl, data);
document.write(res);
//输出: Ch En Math physics
5、{{>partials}}
以>
开始表示子模块,如{{> msg}};当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块,例如:
var tpl = "<h1>{{namme}}</h1> <ul>{{>msg}}</ul>";
var partials = {
msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg}}"
};
var res = Mustache.render(tpl, data, partials);
document.write(res);
//输出:
// female
// 22
// reading
6、{{{data}}}
{{data}}
输出会将等特殊字符转译,如果想保持内容原样输出可以使用{{{}}}
,例如:
var tpl = '{{#msg}} <p>{{{age}}}</p> {{/msg}}'
var res = Mustache.render(tpl, data);
document.write(res);
console.log(typeof(data.msg.age));//控制台打印age类型为string
//输出:22
7、{{!comments}}
!
表示注释,注释后不会渲染输出任何内容。
{{!这里是注释}}
//输出:
如果页面上的内容是从后台获取数据并渲染到页面上的,我们就可以使用mustache模板了。
值得注意的是,render的数据一定要与键名相符合。