mustache.js的使用说明

Mustache 是个不错的js模板引擎，源码：https://github.com/janl/mustache.js

mustache的一些说明：http://mustache.github.com/mustache.5.html

下面是自己总结的一些小说明

1、简单的变量替换{{name}}

     eg：var data={"name":"Jhon"};
            var output= Mustache.render("{{name}} is awsome",data);
            console.log(output);//Jhon is awsome.
2、若是变量中含有html代码，而又不想转义的，在变量前面加上&即可。{{&name}}
3、变量是对象时，还可以声明其属性：
    eg：var data = { "name": {
                              "first":"Willy",
                              "last":"John"
                         },
               "age":"18"};

            var output=Mustache.render("{{name.first}} {{name.last}} is {{age}}  years old.",data);
            console.log(output);//Willy Jhon is 18 years old.
4、{{#param}}标签的功能很强大，有if判断、foreach的功能
     eg1：//判断
   

 var data = {
              "nothin":true
           };
            var output = Mustache.render(
                    "Shown.{{#nothin}}Never shown!{{/nothin}}", data);
             console.log(output);//Shown.Never shown!

eg2:迭代

  var data = {
     "stooges":[{ "name" : "Moe" },
                   { "name" : "Larry"},
                   {"name" : "Curly"}
                   ]
        };var output = Mustache.render("{{#stooges}}       {{name}}       {{/stooges}}",data);
console.log(output);//     Moe              Larry              Curly   

     
      若迭代的是数组，还可以通过{{.}}来调换每个元素
      eg3：//数组迭代
     

 var data = {
             "musketeers":[ "Athos", "Aramis", "Porthos", "D","Artagnan" ]
         };
        var output = Mustache.render("{{#musketeers}}   * {{.}}     {{/musketeers}}",
                 data);
         console.log(output);// * Athos * Aramis * Porthos * D * Artagnan

5、迭代输出还可以是一个function返回的结果：

var data = {
            "beatles" : [ {
                "firstName" : "John",
               "lastName" : "Lennon"
            }, {
                "firstName" : "Paul",
                "lastName" : "McCartney"
            } ],
            "name" : function() {
                return this.firstName + " " + this.lastName;
            }
         };
var output = Mustache.render("{{#beatles}} *{{name}}        {{/beatles}}", data);
console.log(output);//*John Lennon *Paul McCartney

6、{{^}}与{{＃}}相反，若变量是null、undefined、 false、和空数组则执行相应操作，相当于提供了一个错误处理机制

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

7、 {{!  }}注释
8、包含

base.mustache:
<h2>Names</h2>
{{#names}}

 

 {{> user}}
{{/names}}
user.mustache:
<strong>{{name}}</strong>    

上述代码等价于：

<h2>Names</h2>
{{#names}}
  <strong>{{name}}</strong>
{{/names}}