Mustache的简单使用

1. {{a}}和{{function}}

var view = {     
    content: 'Tom',     
    cacl: function () {            
        return 6 + 4;     
    } 
};
$("#id").html(Mustache.render("{{content}} is {{cacl}} years old"

=>Tom is 10 years old

只需要使用{{}}包含起来就可以了，里面放上对象的名称。但如果指定的属性为函数的时候，不会输出函数里面的内容，而是先执行函数，然后将返回的结果显示出来。

2. {{&a}}和{{{a}}} 

var view = {
      name: "Tom",
      company: "<b>Baidu</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

=>Tom
    <b>Baidu</b>
    Baidu
    Baidu

   Mustache默认会将值里面的html标记进行转义，但是有时候我们并不需要。所以这里我们可以使用{{{}}}或者是{{&}}包含，那么Mustache就不会转义里面的html标记。

3. {{#a}}{{/a}}

var view1 = {
   person: false
};
show(Mustache.render("hello{{#person}} world{{/person}}", view1));

=>hello

var view2 = {
    person: [
       { "name": "Tom" },
       { "name": "Jack" },
       { "name": "Lucy" }
    ]
};
show(Mustache.render("{{#person}}{{name}}<br />{{/person}}", view2));

=>Tom
  Jack
  Lucy

var view3 = {
    "repos": ['a','b'],['c'],['d']
};
show(Mustache.render("{{#repos}}{{&.}}{{/repos}}", view3));

=>a,b(不确定)
  c
  d

  {{#a}}{{/a}}有if和foreach功能

  当person为false,null,空数组,0,空字符串时,不渲染指定部分。

  将一个由对象组成的数组循环输出输出。

  如果我们输出的是数组，就需要使用{{.}}来替代{{name}}。

4. {{^a}}{{/a}}

var view = {
   "data": []
};
show(Mustache.render("{{#data}}{{.}}{{/data}}{{^data}}no data{{/data}}", view));

=>no data

  {{^a}}{{/a}}来定义节的话，那么这个部分只会在里面的值为空，null，空数组，空字符串的时候才会显示。与{{#a}}{{/a}}就可以实现了if else的效果了。

5. {{>a}}

var view = {
    names: [
       { "name": "hello" },
       { "name": ":" },
       { "name": "world" }
    ]
};
var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
var name = "<b>{{name}}</b>";
show(Mustache.render(base, view, { user: name }));

=>hello:world