-
Mustache是基于jQuery的一个模板引擎
-
基本语法
-
简单对象绑定。
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方法中的第二个参数的对象属性名称保持一致；
-
对象数组循环渲染。
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行的展示。
-
判断对象为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，所以在展示时，该条用户信息没有被展示。 有了判空的方法当然还有与之相反的方法{{^}}，该方法表示的意思与{{#}}意思相反。
-
防止HTML转义
var user = { name: "<h1>Olive</h1>" };
var template = "my name is {{&name}}";
var view = Mustache.render(template, user);
$("#text").html(view);
注意：在某些时候，我们要绑定的数据源中可能会有一些html标记，如果单纯的采用{{}}这种方式来绑定的话，默认的会将HTML标记转义。为了解决防止绑定字段中的内容被转移我们可以这样做{{&}},这样就可以防止转义。
