Mustache笔记

Mustache是一种Logic-less template.不支持if这类条件判断是Logic-less的显著特征之一.

经典案例：

var view = {
　　name: "Joe",
　　winnings: {
　　　　value: 1000,
　　　　taxed_value: function() { return this.value - (this.value * 0.4); }
　　}
};
var template = "Welcome, {{name}}! {{>winnings}}"
var partials = { winnings: "You just won ${{value}} (which is ${{taxed_value}} after tax)"}; var output = Mustache.to_html(template, view, partials)
 
output will be
:Welcome, Joe! You just won $1000 (which is $600 after tax)

描述

Mustache可以用于HTML，配置文件，源代码 - 等等任何东西。它用值来扩充模板文件中的标签，而这些值是由哈希或对象提供的。

我们称它为“轻逻辑”是因为在Mustache模板中没有if语句，else从句，或者for循环。取而代之在Mustache模板中只有标签。一些标签被替换成一个值，一些则被置空，另外的一些被转化为一系列的值。这篇文档讲解了各种不同的Mustache标签。

标签类型：

变量：变量是最基本的标签类型。基本的模板中的{{name}}的标签会试图在当前上下文中查询name对应的关键字。

如果不存在name所对应的关键字，那么就不会渲染任何内容。所有的变量默认都是经过转义之后的HTML，如果想要返回的是未经转义的HTML，那么可以实用三个花括号：{{{name}}}。也可以使用&标记变量，使其不转义HTML：{{&name}}。

例：

//模板

* {{name}}
* {{age}}
* {{company}}
* {{{company}}}
//哈希
{ "name": "Chris", "company": "<b>GitHub</b>"}
//output
* Chris
*
* &lt;b&gt;GitHub&lt;/b&gt;
* <b>GitHub</b>

 

小节:小节可以把文本块渲染一次或者多次，这取决于在当前上下文中的键值。

小节以一个井号（#）作为开始用一个反斜线（/）作为结束。也就是说一个名叫“person”的小节，它会以{{#person}}作为开始并且以{{/person}}作为结束。 小节的行为取决于关键字的值。

 

例：

//模板
Shown.
{{#person}}
Never shown!
{{/person}}
 
//哈希
{ "person": true,}
//output
Shown.

 

非空列表： 如果关键字 ‘person’ 存在并且为非false值，那么在‘#’和’/‘之间的HTML将会被渲染并显示一次或者多次。

当键值是一个非空列表的时候，这些块中的文本将会随着列表中的条目逐一显示出来。在每次循环的时候块的上下文都会被设置为当前条目。通过这种方式我们就可以对集合进行循环。

例：

//模板
{{#repo}}
<b>{{name}}</b>
{{/repo}}
//哈希
{
　　"repo":[
　　　　{ "name": "resque" },
　　　　{ "name": "hub" },
　　　　{ "name": "rip" },
　　]
}
//output
<b>resque</b> <b>hub</b> <b>rip</b>

 

 

匿名表达式：当键值是一个可以调用的对象，如函数或者lambda表达式的时候，那么这个对象将会被调用，相应的文本块也会被传入。传入的文本是未经渲染的原始块。

{{tags}}也不会被扩充 - lambda表达式需自行处理这些标签。通过这种方式能实现过滤或者缓存。

例：

//模板
{{#wrapped}}
{{name}} is awesome.
{{/wrapped}}
//哈希
{
"name": "Willy",
"wrapped": function() {
return function(text) { return "<b>" + render(text) + "</b>" }
}
}
//output
<b>Willy is awesome.</b>

 

非False值:当值为一个非False值且不是一个列表的时候，它会被当作上下文用于单个渲染块。

例：

//模板
{{#person}}
Hi {{name}}!
{{/person}}
//哈希
{
"person": { "name": "Jon" }
}
//output
Hi Jon!

 

补节:一个补节以一个补字号（^）开始，并以一个斜线结束。也就是说‘person‘的补节以 {{^person}} 开始，以 {{/person}}结束。

在小节基于键值对来一次或多次渲染文本时，补节也会基于键的补值去渲染文本。当键值不存在，或是false值，或者空列表时, 补节会被渲染。

例：

//模板
{{#repo}}
<b>{{name}}</b>
{{/repo}}
{{^repo}}
No repos :(
{{/repo}}
//哈希
{ "repo": []}
//output
No repos :(

 

注释：注释以感叹号作为开始，而之后的内容将被忽略。如下模板：

<h1>Today{{! ignore me }}.</h1>

将会被渲染为如下形式：

<h1>Today.</h1>

注释中可以含有换行。

 

局部模板：局部模板用一个大于号作为起始，如{{> box}}。

局部模板在运行时（与编译时相反）渲染，所以允许递归的局部模板存在。只需避免无线循环即可。

它们也继承了调用的上下行文。

例：

//模板base
<h2>Names</h2>
{{#names}}
{{> user}}
{{/names}}
//模板user
<strong>{{name}}</strong>
//可认为是单独已扩展的模板
<h2>Names</h2>
{{#names}}
<strong>{{name}}</strong>
{{/names}}

 

设置分隔符：设置分隔符的标签以等号开始，然后把{{和}}改成自定义的字符串。

思考如下例子：

* {{default_tags}}
{{=<% %>=}}
* <% erb_style_tags %><%={{ }}=%>
* {{ default_tags_again }}

现在我们有一个三个条目的列表，那么第一条将会使用默认的标签类型，第二个会使用设置分隔符标签定义的erb样式，第三条会通过另外一个设置分隔符的声明而重新变回默认样式。

 

 

 

转载于:https://www.cnblogs.com/xiaozy/archive/2013/05/06/3062734.html