Template模板Mustache.js

最近项目一直在使用Mustache.js前端模版，那么使用过程中一些语法顺便聊下。

Mustache简介

Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。

语法

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

Mustache用法

可以直接下载引用或者npm安装使用；这里使用引用介绍：

<script type="text/javascript" src="mustache.js"></script>
var data = {
  name: "Joe",
  age:28
};
var tpl = '<div>My Name：{{Name}}，Age：{{age}}</div>';
var html = Mustache.render(tpl, data); //后面省略渲染步骤直接输出结果集
console.log(html); //My Name：Joe，Age：28;

其中花括号就是Mustache标识符号，花括号中的名字表示键名;

Mustache循环语句

以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染，例如：

var data = {
  "stooges": [
    { "name": "Moe" },
    { "name": "Larry" },
    { "name": "Curly" }
  ]
}

Template:

1
2
3

{{#stooges}}
<b>{{name}}</b>
{{/stooges}}

输入结果：

1
2
3

<b>Moe</b>
<b>Larry</b>
<b>Curly</b>

//{{^keyName}} {{/keyName}}
//该语法与{{#keyName}} {{/keyName}}类似，不同在于它是当 keyName 值为 null, undefined, false 时才渲染输出该区块内容。
var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}};
var html = Mustache.render(tpl, data);
//输出：
没找到 nothing 键名就会渲染这段

//{{.}}语法 表示枚举；可以循环输出整个数组，例如：
var data = {
  "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}

Template:

1
2
3

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

输入结果：

Athos
Aramis
Porthos
D'Artagnan

函数节变量

如果节变量的值是一个函数，它将在每次迭代的列表中的当前项的上下文中调用，例如：

var data = {
  "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:

1
2
3

{{#beatles}}
* {{name}}
{{/beatles}}

输入结果：

* John Lennon
* Paul McCartney
* George Harrison
* Ringo Starr

函数

如果一个节键的值是一个函数，它被称为节的文本块，未渲染，作为它的第一个参数。第二个参数是一个特殊的渲染函数，它使用当前视图作为视图参数。它在当前视图对象的上下文中调用。

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

Template:

1	{{#bold}}Hi {{name}}.{{/bold}}

输入结果：

1	<b>Hi Tater.</b>

//倒置部分^ {{}} {{部分代替#节}}
//一个倒置的节块呈现只有这部分标签的值为空，不确定的，虚假的，falsy或空列表。
var data = {
  "repos": []
}

Template:

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

输入结果：

1	No repos :(

//{{>partials}}语法；
//以>开始表示子模块；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块，例如：
var data = {
    "company": "Apple",
    "address": {
        "street": "1 Infinite Loop Cupertino</br>",
        "city": "California ",
        "state": "CA ",
        "zip": "95014 "
    },
    "product": ["Macbook ","iPhone ","iPod ","iPad "]
}

Template:

1 2	var tpl = "<h1>{{company}}</h1> <ul>{{>address}}</ul>" var partials = {address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"}

输入结果：

<h1>Apple</h1>
<ul>
	<li>1 Infinite Loop Cupertino&lt;/br&gt;</li>
	<li>California</li>
	<li>CA</li>
	<li>95014</li>
</ul>

//{{{keyName}}} 语法
//输出会将等特殊字符转译，如果想保持内容原样输出可以使用花括号，例如：
var data = {
    "company": "Apple",
    "address": {
        "street": "1 Infinite Loop Cupertino</br>",
        "city": "California ",
        "state": "CA ",
        "zip": "95014 "
    },
    "product": ["Macbook ","iPhone ","iPod ","iPad "]
}

Template:

1	var tpl = '{{#address}} <p>{{{street}}}</p> {{/address}}'

输入结果：

1	<p>1 Infinite Loop Cupertino</br></p>

//{{!comments}}语法
表示注释，注释后不会渲染输出任何内容。
``` bash
{{!这里是注释}}
//输出：

参考文章
https://github.com/janl/mustache.js