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...