Mustache.js语法学习笔记

原文地址：http://www.cnblogs.com/flypig88/archive/2012/05/14/2497780.html

看了Mustache的github，学学其中的语法，做个笔记

1.简单的变量替换：{{name}}

1 var data = { "name": "Willy" };
2 Mustache.render("{{name}} is awesome.",data);

返回结果 Willy is awesome.

2.如果变量含有html的代码的，例如：<br>、<tr>等等而不想转义可以在用{{&name}}

1 var data = {
2             "name" : "<br>Willy<br>"
3         };
4         var output = Mustache.render("{{&name}} is awesome.", data);
5         console.log(output);

结果：<br>Willy<br> is awesome.

去掉"&"的结果是转义为：&lt;br&gt;Willy&lt;br&gt; is awesome.（默认将"<"和">"转义）

3.如果是对象，还能解释其属性

 1 var data = {
 2             "name" : {
 3                 "first" : "Chen",
 4                 "last" : "Jackson"
 5             },
 6             "age" : 18
 7         };
 8         var output = Mustache.render(
 9                 "name:{{name.first}} {{name.last}},age:{{age}}", data);
10         console.log(output);

结果：name:Chen Jackson,age:18

4.{{#param}}这个标签很强大，有if判断、forEach的功能。

 

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

如果nothin是空或者null，或者是false都会输出Shown.相反则是Shown.Never shown!。

5.迭代

 1 var data = {
 2             "stooges" : [ {
 3                 "name" : "Moe"
 4             }, {
 5                 "name" : "Larry"
 6             }, {
 7                 "name" : "Curly"
 8             } ]
 9         };
10         var output = Mustache.render("{{#stooges}}<b>{{name}}</b>{{/stooges}}",
11                 data);
12         console.log(output);

输出：<b>Moe</b>

        <b>Larry</b>

        <b>Curly</b>

6.如果迭代的是数组，还可以用{{.}}来替代每个元素

1 var data = {
2             "musketeers" : [ "Athos", "Aramis", "Porthos", "D'Artagnan" ]
3         };
4         var output = Mustache.render("{{#musketeers}}* {{&.}}{{/musketeers}}",
5                 data);
6         console.log(output);

输出：* Athos

        * Aramis

        * Porthos

        * D'Artagnan

7.迭代输出的还可以是一个function返回的结果，function可以读取当前变量的上下文来获取其他属性执行其他操作

 1 var data = {
 2             "beatles" : [ {
 3                 "firstName" : "John",
 4                 "lastName" : "Lennon"
 5             }, {
 6                 "firstName" : "Paul",
 7                 "lastName" : "McCartney"
 8             }, {
 9                 "firstName" : "George",
10                 "lastName" : "Harrison"
11             }, {
12                 "firstName" : "Ringo",
13                 "lastName" : "Starr"
14             } ],
15             "name" : function() {
16                 return this.firstName + " " + this.lastName;
17             }
18         };
19         var output = Mustache
20                 .render("{{#beatles}} *{{name}}{{/beatles}}", data);
21         console.log(output);

输出： *John Lennon

         *Paul McCartney

         *George Harrison

         *Ringo Starr

8：方法里面可以再执行变量中的表达式

 1 var data = {
 2             "name" : "{{age}}" + "Tater",
 3             "bold" : function() {
 4                 return function(text, render) {
 5                     console.log(text);
 6                     return "<b>" + render(text) + "</b>";
 7                 };
 8             },
 9             "age" : 18
10         };
11         var output = Mustache.render("{{#bold}}Hi {{name}}.{{/bold}}", data);
12         console.log(output);

输出结果：

Hi {{age}}Tater.

<b>Hi 18Tater.</b>

9.{{^}}与{{#}}相反，如果变量是null、undefined、 false、和空数组讲输出结果

10.{{!  }}注释