mustache初次使用

最近接触使用了 Mustache 模板引擎，发现非常好用，故稍微记录一下我。
mustache的github地址：mustache

mustache用法很简单，大概就以下三步：

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

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

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

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

这里记录一些基本语法：

1. 基本

data:

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

template

*  {{name}}     {{可以理解为这里面放的是键名}}
*  {{age}}
*  {{company}}
*  {{{company}}}  默认情况下，所有变量都是HTML转义的。如果要渲染未转义的HTML，使用三重括号：{{{}}}
*  {{&company}}   可以使用 ＆ 来取消转义。
  
*  {{=<% %>=}}  不解析输出
   {{company}}
   <%={{ }}=%>   

output

* Chris
*         （因为不存在 age, 所以这里啥也没有）
* <b>GitHub</b>
* <b>GitHub</b>
* <b>GitHub</b>
* {{company}}

2. if 遍历语法

{{ #weather }}
    {{ city }}
{{ /weather }}

这可以看做代替了 if 语法，可以用来遍历数据 （ 相当于 if ( weather ) {…} ）
条件是：weather 存在 且不为 null, undefined, false, 0, ‘’, []

data:

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

template:

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

output:

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

3. 与上一个相反，weather为 false, null, undefined, [], 0 显示

{{ ^weather }}
    显示无数据
{{ /weather }}

4. 遍历 字符串数组

{{ #cities }}
    {{ . }}
{{ /cities }}

data:

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

template:

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

output:

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

5. 使用函数
   data:

{
     weather: {
         city: '四川',
         weather: '<b>多云</b>',
         min_tempe: 20,
         max_tempe: 30
     }   
     tempe: function() {
         return this.min_tempe + '~' + this.max_tempe;
     }
}

template:

{{#weather}}
    {{tempe}}
{{/weather}}

output:

20 ~ 30

网上解释：这里的 function 将在每次迭代时在列表中的当前项的上下文中调用。
我理解的就是 function每次的上下文都要在 渲染时才决定，因此 this 的指向要看具体的执行环境。
这里 temp函数是在 weather中执行的，所以function中的this指向的是 weather

6. 比较复杂的函数
   网上的例子：

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.

data:

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

template:

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

output:

<b>Hi Tater.</b>

没看太懂，应该是在函数中定义render渲染视图方法，至今也没用到过。

还有其他的用法等用到了再记录吧。