mustache：web模板引擎

mustache简介

Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。这里主要是看JavaScript中的应用。Javascript 语言的模板引擎，目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等，

Mustache 的模板语法很简单，就那么几个：

{{keyName}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{<partials}}
{{{keyName}}}
{{!comments}}

下面看看mustache.js的使用，github地址： https://github.com/janl/musta...

使用方法

这里看看快速使用：

var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("<p>{{title}} spends {{calc}}</p>", view);

这个直观的认识就是：写一段字符串，可以是和html文档一样的字符串模板，然后按照mustache的书写规则将需要处理的数据对象通过渲染方法注入，形成一个需要的html文本，就可以是使用innerHTML或者$.html之类的方法放到页面中。

变量

mustache的模板就是一段字符串，里面编写了任意多的mustache tags，都是使用 {{key}} 来进行占位，如果渲染数据没有对应的数据就会渲染为空，需要注意的是{{}}这样书写是不会html转译的，渲染数据里面书写的html标签会被转化为实体，可以使用{{{}}}或者{{&name}}，如果不想{{}}被mustache解析渲染的话可以使用 {{=<% %>=}} {{key}} <%={{ }}=%> 将忽略出包起来。

View:

{
  "name": "Chris",
  "company": "<b>GitHub</b>"
}
Template:

* {{name}}      //* Chris
* {{age}}       //* 
* {{company}}   //* &lt;b&gt;GitHub&lt;/b&gt;
* {{{company}}}  //* <b>GitHub</b>
* {{&company}}  //* <b>GitHub</b>
{{=<% %>=}}
* {{company}}  //* {{company}}
<%={{ }}=%>

JavaScript's dot notation may be used to access keys that are properties of objects in a view.

View:

{
  "name": {
    "first": "Michael",
    "last": "Jackson"
  },
  "age": "RIP"
}
Template:

* {{name.first}} {{name.last}}
* {{age}}
Output:

* Michael Jackson
* RIP

区块

区块内的部分可能会被渲染一次或者多次，根据模板中的具体展示，区块同样是使用两个tag标志起始和结束，{{#key}} {{/key}}
If the person key does not exist, or exists and has a value of null, undefined, false, 0, or NaN, or is an empty string or an empty list, the block will not be rendered.
也就是说如果如果块区的值对应的是null、undefined、false、0、NaN、空字符串、空数组，这个块区是不会渲染的，如果是数组就会如下：

View:

{
  "stooges": [
    { "name": "Moe" },
    { "name": "Larry" },
    { "name": "Curly" }
  ]
}
Template:

{{#stooges}}      //<b>Moe</b>
<b>{{name}}</b>   //<b>Larry</b>
{{/stooges}}      //<b>Curly</b>

如果块区是要展示一个字符串数组，可以考虑使用{{.}}来完成循环渲染，

{{#musketeers}}
* {{.}}
{{/musketeers}}

块区甚至可以直接使用function来进行数据的处理

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

还有块区的key直接就是function的时候，这个看起来好高级，我也没太明白，一般不会这么写吧。

If the value of a section key is a function, it is called with the section's literal block of text, un-rendered, as its first argument. The second argument is a special rendering function that uses the current view as its view argument. It is called in the context of the current view object.

View:

{
  "name": "Tater",
  "bold": function () {
    return function (text, render) {
      return "<b>" + render(text) + "</b>";
    }
  }
}
Template:

{{#bold}}Hi {{name}}.{{/bold}}
Output:

<b>Hi Tater.</b>

反转块区

这个和块区更像是一个组合，对应 if else这种情况，块区实在key有内容的时候来进行渲染，反转块区恰恰相反，在没有内容的时候来进行渲染，这也很符合web开发的情景，

View:

{
  "repos": []
}
Template:

{{#repos}}<b>{{name}}</b>{{/repos}}
{{^repos}}No repos :({{/repos}}
Output:

No repos :(

其他 注释、子模块

Comments begin with a bang and are ignored. The following template:
<h1>Today{{! ignore me }}.</h1>
Will render as follows:
<h1>Today.</h1>
{{!comment}} 这就是注释了

子模块就是当渲染的数据比较的复杂的时候就可以考虑使用分割来进行部分一快一块的渲染，{{> block}}
这里需要注意渲染调用的方法和之前不一样了，需要最后带上block这个区块的渲染内容

For example, this template and partial:

base.mustache:
<h2>Names</h2>
{{#names}}
  {{> user}}
{{/names}}

user.mustache:
<strong>{{name}}</strong>
Can be thought of as a single, expanded template:

<h2>Names</h2>
{{#names}}
  <strong>{{name}}</strong>
{{/names}}
In mustache.js an object of partials may be passed as the third argument to Mustache.render. The object should be keyed by the name of the partial, and its value should be the partial text.

Mustache.render(template, view, {
  user: userTemplate
});

参考：https://github.com/janl/musta...
http://www.iinterest.net/2012...