原文地址：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" : "
Willy
"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":true3             };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}}{
   {name}}{
   {/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 = Mustache20                 .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 "" + render(text) + ""; 7                 }; 8             }, 9             "age" : 1810         };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.{

{!  }}注释