Mustache

• Mustache是基于jQuery的一个模板引擎

• 基本语法

1. 简单对象绑定。

var user = {name:'one',age:23,sex:'girl'};
        var temp = 'my name is {{name}},{{age}}years-old';
        var view = Mustache.render(temp,user);
        //主要的渲染方法为Mustache.render，该方法有两个参数，第一个为要渲染的模版，也就是上例中的temp，第二个就是数据源也就是上例中的user对象
        $("#text").html(view);

注意：大括号里面的内容字段要和render方法中的第二个参数的对象属性名称保持一致；

2. 对象数组循环渲染。

var users = { result: [{ name: "Only", age: 24, sex: "boy" },  
                                { name: "for", age: 24, sex: "boy" },  
                                { name: "Olive", age: 23, sex: "girl"}  
                    ]};
        var template = "<div>\
                            <table cellpadding=0 cellspacing=0 class='tb' >\
                                <tr>\
                                    <td>Name</td>\
                                    <td>Age</td>\
                                    <td>Sex</td>\
                                </tr>\
                                {{#result}}\
                                <tr>\
                                    <td>{{name}}</td>\
                                    <td>{{age}}</td>\
                                    <td>{{sex}}</td>\
                                </tr>\
                                {{/result}}\
                            </table>\
                        <div>";  
        var views = Mustache.render(template, users);  //其中{{#}}标记表示从该标记以后的内容全部都要循环展示
        //{{/}}标记表示循环结束。这种情况多用于table行的展示。

        $("#text").html(views);

注意：对于对象数据Mustache也有其特殊的语法：{{#}}{{/}}，如果所给定的数据源是一个对象数组，则可以使用该语法，很方便的用来循环展示。其中{{#}}标记表示从该标记以后的内容全部都要循环展示。{{/}}标记表示循环结束。这种情况多用于table行的展示。

3. 判断对象为null（false/undefined）

var users = { result: 
                            [
                                { name: null, age: 24, sex: "boy" },
                                { name: "for", age: 24, sex: "boy" },
                                { name: "Olive", age: 23, sex: "girl" }
                            ]
                    };
        var template = "\
                        <div>\
                            <table cellpadding=0 cellspacing=0 class='tb' >\
                                <tr>\
                                    <td>Name</td>\
                                    <td>Age</td>\
                                    <td>Sex</td>\
                                </tr>\
                                {{#result}}\
                                <tr>\
                                    <td>{{#name}}{{name}}</td>\
                                    <td>{{age}}</td>\
                                    <td>{{sex}}{{/name}}</td>\
                                </tr>\
                                {{/result}}\
                            </table>\
                        <div>";
        var views = Mustache.render(template, users);
        //{{#}}{{/}}这样的语法，除了上边的循环遍历之外，它还有另外的一层意思就是判空，如果{{#}}中的值为null或false或undefine则其标记内的内容则不展现
        //users对象中的第一个对象名为null，所以在展示时，该条用户信息没有被展示。
        //有了判空的方法当然还有与之相反的方法{{^}}，该方法表示的意思与{{#}}意思相反。
        $("#text").html(views);

注意：{{#}}{{/}}这样的语法，除了上边的循环遍历之外，它还有另外的一层意思就是判空，如果{{#}}中的值为null或false或undefine则其标记内的内容则不展现。 在代码示例中，users对象中的第一个对象名为null，所以在展示时，该条用户信息没有被展示。 有了判空的方法当然还有与之相反的方法{{^}}，该方法表示的意思与{{#}}意思相反。

4. 防止HTML转义

var user = { name: "<h1>Olive</h1>" };
        var template = "my name is {{&name}}";
        var view = Mustache.render(template, user);
        $("#text").html(view);

注意：在某些时候，我们要绑定的数据源中可能会有一些html标记，如果单纯的采用{{}}这种方式来绑定的话，默认的会将HTML标记转义。为了解决防止绑定字段中的内容被转移我们可以这样做{{&}},这样就可以防止转义。