Mustache模版中文文档
简介
mustache是一个无逻辑的模版规范语言，可以让后端代码和前端表现分离开，和PHP的Smarty，Java的FreeMarker, Python的Jinja类似。不同的是由于语法简单，被许多编程语言所支持，很多需要进行逻辑分离的项目也采用了Mustache比如MediaWiki的皮肤[1]。
支持语言
点击链接可以查看对应语言的Mustache库。
Ruby, JavaScript, Python, Erlang, Elixir, PHP, Perl, Raku, Objective-C, Java, C#/.NET, Android, C++, CFEngine, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure[Script], Clojure, Fantom, CoffeeScript, D, Haskell, XQuery, ASP, Io, Dart, Haxe, Delphi, Racket, Rust, OCaml, Swift, Bash, Julia, R, Crystal, Common Lisp, Nim, Pharo, Tcl, C, ABAP, Elm, Kotlin, and for SQL
支持编辑器
Demo
下面是一个Javascript的例子，你可以直接在浏览器中尝试Mustache模版，快速学习掌握！
示例
<html>
<script>
function renderHello() {
var template = document.getElementById('template').innerHTML;
var rendered = Mustache.render(template,
// 编辑这里的数据看看
{ name: 'Luke' }
);
document.getElementById('target').innerHTML = rendered;
}
window.onload = function(){ renderHello()}
</script>
<body >
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
<div id="target">Loading...</div>
<script src="https://unpkg.xiaobai.wang/mustache@latest"></script>
</body>
</html>你可以将下面的例子复制到上面代码中执行试试看。
模版
<h1>{{header}}</h1>
{{#bug}}
{{/bug}}
{{#items}}
{{#first}}
<li><strong>{{name}}</strong></li>
{{/first}}
{{#link}}
<li><a href="{{url}}">{{name}}</a></li>
{{/link}}
{{/items}}
{{#empty}}
<p>The list is empty.</p>
{{/empty}}
数据
{
"header": "Colors",
"items": [
{"name": "red", "first": true, "url": "#Red"},
{"name": "green", "link": true, "url": "#Green"},
{"name": "blue", "link": true, "url": "#Blue"}
],
"empty": false
}渲染后的结果
<h1>Colors</h1>
<li><strong>red</strong></li>
<li><a href="#Green">green</a></li>
<li><a href="#Blue">blue</a></li>标签类型
通过上面的例子可以看出，Mustache是“无逻辑”，因为没有 if、else或 for 循环。其只有标签。因为只有标签所以很多逻辑都需要在你使用的编程语言中提前处理好，然后再进行渲染。 Mustache 可用于 HTML、配置文件、源代码——任何东西。它通过使用Hash或对象中提供的值扩展模板中的标签来工作。 标签由花括号表示。{{name}}是一个标签，就像{{#name}}. 在demo中，我们都将其name称为键或标签键。下面介绍标签的类型。
变量（Variable）
最基本的标签类型是变量。基本模板中的{{name}}标签将尝试在当前上下文中查找name key。如果没有name key，则将递归检查父上下文。如果到达顶部上下文name但仍未找到该key，则不会呈现任何内容。 默认情况下，所有变量都是 HTML 转义的。如果要返回未转义的 HTML，请使用3个花括号：{{{name}}}。 您还可以使用&来取消转义变量：{{& name}}. 这在更改分隔符时可能很有用（请参阅下面的“设置分隔符”）。 默认情况下，变量没有则返回一个空字符串。这通常可以在你的 Mustache 库中进行配置。例如，Ruby 版本的 Mustache 支持在这种情况下抛出异常，及时发现代码中的BUG。
模版
* {{name}}
* {{age}}
* {{company}}
* {{{company}}}
数据
{
"name": "Chris",
"company": "<b>GitHub</b>"
}
结果
* Chris
*
* <b>GitHub</b>
* <b>GitHub</b>
区域 Sections
一个sesion已#开头，以/结尾。也就是说， {{#person}}开始一个“person” section，同时{{/person}}结束它。
错误值或空列表
该部分的行为key对应的value决定。如果person存在且值为 false 或为空列表，则不会显示井号和斜杠之间的 HTML
模版
Shown.
{{#person}}
Never shown!
{{/person}}
数据
{
"person": false
}
结果
Shown.非空的列表
如果person存在并且具有非 false 值，则井号和斜线之间的 HTML 将被渲染并显示一次或多次。当值为非空列表时，块中的文本将针对列表中的每项显示一次。section的上下文将被设置为每次迭代的当前项。通过这种方式，我们可以遍历集合。
模版
{{#repo}}
<b>{{name}}</b>
{{/repo}}数据
{
"repo": [
{ "name": "resque" },
{ "name": "hub" },
{ "name": "rip" }
]
}结果
<b>resque</b>
<b>hub</b>
<b>rip</b>函数 Lambdas
当值函数或 lambda 的时候，渲染的时候会将包含的文本块传递进去同时将返回值当做结果进行渲染，通过这种方式，可以实现过滤器或缓存，扩展更多的复杂功能。
模版
{{#wrapped}}
{{name}} is awesome.
{{/wrapped}}数据
{
"name": "Willy",
"wrapped": function() {
return function(text, render) {
return "<b>" + render(text) + "</b>"
}
}
}结果
<b>Willy is awesome.</b>非假值 (Non-False Values)
当值不是false的时候就会渲染其包含的字段。下面的例子是person不为false则渲染其包含的文本块和其中的name字段。
模版
{{#person?}}
Hi {{name}}!
{{/person?}}
数据
{
"person?": { "name": "Jon" }
}
结果
Hi Jon!注释 Comments
注释以感叹号开头并会在渲染的时候被忽略。
模版
<h1>Today{{! ignore me }}.</h1>
结果
<h1>Today.</h1>组件 Partials
Partials语法为{{> box}}, 通过Partials可以将复用的代码进行抽象。
模版
base.mustache:
<h2>Names</h2>
{{#names}}
{{> user}}
{{/names}}
user.mustache:
<strong>{{name}}</strong>
等价模版
<h2>Names</h2>
{{#names}}
<strong>{{name}}</strong>
{{/names}}可以看出数据可以被传递到Partials中去，你只需要把你代码中经常被用的给复制到单独的模版中去，比如header,footer,sidebar等。