mustache.js模板引擎
mustache js
mustache.js是mustache模板系统的JavaScript实现。通过标签实现去逻辑化。
helloworld
- 在页面中引入mustache.js源文件
- 定义数据和模板，使用
Mustache.render()渲染得到所需HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mustache.js Hello world</title>
</head>
<body>
<div id="target"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.js"></script>
<script>
var view = {
title: 'Joe',
calc: function () {
return 2 + 4;
}
};
var target = document.getElementById('target');
target.innerHTML = Mustache.render('{{title}} spends {{calc}}', view);
</script>
</body>
</html>
基本使用
变量
变量渲染是最常用的使用。{{name}}标签渲染当前上下文对象中的name属性到结果。
如果没有对应的key，不会输入任何结果。
默认情况下所有变量字符串输出时都会进行HTML转义。如果想要渲染没转义的结果。可以使用三个括号{{{name}}}或者在变量前加&.
view
{
"name": "chirs",
"company": '<b>github</b>'
}
template:
* {{name}}
* {{age}}
* {{company}}
* {{{company}}}
* {{&company}}
output
* Chris
*
* <b>GitHub</b>
* <b>GitHub</b>
* <b>GitHub</b>
JavaScript的点操作符可以用于访问属性的子属性。
view
{
"name": {
"first": "Michael",
"last": "Jackson"
},
"age": "rip"
}
template
* {{name.first}} {{name.last}}
* {{age}}
output
* Michael Jackson
* RIP
sections
section根据当前上下文对应属性值确定渲染结果，类似于循环和判断控制
section以#开头，以/结束。例如{{#person}}开始一个personsection，
{{/person}}结束对应section。包含在标签内部的文本根据section变量内容进行渲染。
假值或者空列表
如果person属性不存在，或者存在的值为null,undefined,false,0,NaN或者空字符串，或者空列表。对应的块不会进行渲染。
view
{
"person": false
}
template
show.
{{#person}}
Never show!
{{/person}}
output
show.
非空列表
如果person属性存在并且不是前面提到的假值。那么块会根据值渲染一次或者多次。
如果值是列表，块为每一个项渲染一次，渲染上下文问对应的项。这样就方便进行集合遍历。
view
{
"stooges": [
{"name": "More"},
{"name": "Larry"},
{"name": "Curly"}
]
}
template
{{#stooges}}
<b>{{name}}</b>
{{/stooges}}
output
<b>Moe</b>
<b>Larry</b>
<b>Curly</b>
当循环字符串数组时。可以使用.只带当前项。
view
{
"musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}
template
{{#musketeers}}
* {{.}}
{{/musketeers}}
output
* Athos
* Aramis
* Porthos
* D'Artagnan
如果section内渲染的变量是函数，那么它将以当前迭代项作为上下文进行调用。
view:
{
"beatles": [
{ "firstName": "John", "lastName": "Lennon" },
{ "firstName": "Paul", "lastName": "McCartney" },
{ "firstName": "George", "lastName": "Harrison" },
{ "firstName": "Ringo", "lastName": "Starr" }
],
"name": function () {
return this.firstName + " " + this.lastName;
}
}
template
{{#beatles}}
* {{name}}
{{/beatles}}
output
* John Lennon
* Paul McCartney
* George Harrison
* Ringo Starr
inverted sections
inverted section以^开始，对应块渲染规则与section相反，即值不存在，或者值为null,undefined,false，或者空列表时才渲染。
view
{
"repos": []
}
template
{{#repos}}<b>{{name}}</b>{{/repos}}
{{^repos}}No repos :({{/repos}}
output
No repos: (
注释
注释以!开始，在渲染结果中不会出现。
<h1>Today{{! ignore me }}.</h1>
渲染结果如下
<h1>Today.</h1>
注释可以包含换行
partials
partials以大于符号开始，如{{> box}}。在当前位置嵌入其他模板，类似于预处理，可以用于模板重用。
partials在运行时进行渲染，所以可以包含递归partials，需要预防无限循环。
partials继承调用环境的上下文。
例如如下两个模板
base.mst
<h2>Names</h2>
{{#names}}
{{> user}}
{{/names}}
user.mst
<strong>{{name}}</strong>
最终得到扩展后的模板如下
<h2>Names</h2>
{{#names}}
<strong>{{name}}</strong>
{{/names}}
partials在Mustache.render()函数的第三个参数中进行传递。
Mustache.render(template, view, {
user: userTemplate
});
预解析和模板缓存
mustache.js在第一次解析模板时会在内部缓存解析树。下一次渲染相同模板时会提高效率。所以，可以选择在空闲的时候对模板进行解析，提高第一次调用时响应时间。
Mustache.parse(template);
// then , sometime later
Mustache.render(template, view);
