Mustache模板引擎

概述

Mustache 是一个轻量级的前端渲染模板，是一个 logic-less （轻逻辑）模板解析引擎 ，那什么是logic-less （轻逻辑）呢？也就说它是一种没有逻辑的模板，它之所以被称之为没有逻辑的模板，是因为它没有if语句、else子句和for循环，没有这些逻辑，它只有标签，在模板文件中可以使用对象或者散列对这些标签进行替换渲染。它可以被用于html文件，配置文件，源代码等等很多场景。

Mustache的优点就是简单易用，上手非常的快。

简单用法

1. 拿到渲染模板
   var template = $('#tmpl').html();

2. 将数据渲染到模板上
   Mustache.render(template, data);

3. 将渲染后的模板放到想放的dom中
   $dom.html(template)

这里很好理解，就是mustache通过内部方法解析html字符串模板，然后将数据渲染上去形成新的html字符串，最后就可以把它放入页面dom中

基本语法

1.{{keyName}}

{{}}是 Mustache 的标示符，花括号里的值表示键名，这句的作用是直接输出与键名匹配的键值，更笼统的来说也就是简单的变量替换。

举例：

data：

{
    "name": "LiHua",
    "sex": "<b>sex</b>"
}

template

{{name}}    
{{age}}
{{sex}}
{{{sex}}}

output

LiHua
         （因为data不存在 age, 所以这里啥也没有）
<b>sex</b>

2.{{{keyName}}}

{{}}输出会将等html特殊字符进行转义，如果想保持html字符串原样输出,得到未进行转义的html可以使用{{{}}} ，简单地说如果你想获取到未变化得html片段的话就可以使用这个语句。

举例:

data：

{
    "sex": "<b>sex</b>"
}

template

{{{sex}}}

output

sex （这里输出的是未转义的sex）

3.{{#keyName}} {{/keyName}}

以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染 , 可以看做代替了 if 语法，可以用来遍历数据 ，其中{{#}}标记表示从该标记以后的内容全部都要循环展示，{{/}}标记表示循环结束。

举例：

data：

var data = {
    weather: [
        {
            city: '四川',
            sky: '多云'
        },
        {
            city: '河南',
            sky: '晴'
        }]
}

template：

<div>
    查看城市天气:
    {{#weather}}
        {{city}}:{{sky}}<br/>
    {{/weather}}   
</div>

output：

查看城市天气：
        四川：多云
        河南：晴

4.{{^keyName}} {{/keyName}}

这个区块与{{#keyName}} {{/keyName}}类似，不同点在于它是当键值为 null, undefined, false 时才渲染输出该区块内容

举例：

data：

var data = {
    weather: []
}

template：

<div>
    查看城市天气:
    {{^weather}}
        没有数据
    {{/weather}}   
</div>

output：

查看城市天气：没有数据

5.{{.}}

{{.}}表示枚举，它可以循环输出整个数组的数据

举例：

data：

var data = {
    cities: ['北京','南京','上海','广东','深圳','西安']
}

template：

<div>
    查看其他城市:
    {{#cities}}
        <a href="javascript:;"> {{.}} </a>
    {{/cities}}   
</div>

output：

 查看其他城市: 北京 南京 上海 广东 深圳 西安 

**6.{{!keyName}}**

!表示注释，注释后不会渲染输出任何内容。

举例:

data：

{
	data:"这里是注释"
}

template：

{{!data}}

output：

在平时使用时，如果页面上的内容是从后台获取数据并渲染到页面上时，我们就可以使用mustache模板了，但是需要注意的是，render渲染的数据键值一定要与标签键名相符合。