Mustache.js语法

看了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.{{!  }}凝视

原文地址http://www.mysjtu.com/page/M0/S733/733819.html

Mustache.js语法,布布扣,bubuko.com