Mustache.js语法学习笔记
来源:互联网 发布:统计软件 编辑:程序博客网 时间:2024/05/16 16:47
看了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.
去掉"&"的结果是转义为:<br>Willy<br> 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}}<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 = 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 "<b>" + render(text) + "</b>"; 7 }; 8 }, 9 "age" : 1810 };11 var output = Mustache.render("{{#bold}}Hi {{name}}.{{/bold}}", data);12 console.log(output);
输出结果:
9.{{^}}与{{#}}相反,如果变量是null、undefined、
false、和空数组讲输出结果
10.{{! }}注释
原文转自:http://www.cnblogs.com/flypig88/archive/2012/05/14/2497780.html
- Mustache.js语法学习笔记
- Mustache.js语法
- mustache.js使用笔记
- 学习笔记《Mustache》
- mustache语法
- mustache语法
- mustache语法
- JS学习笔记语法篇
- js template 和 Mustache。Mustache额使用
- 教程: Mustache.js
- mustache.js的使用说明
- mustache.js的使用说明
- mustache.js的使用说明
- JS学习笔记(3)基本语法
- JS学习笔记2-JavaScript 语法
- mustache.js的一些例子
- mustache.js官网教程
- Mustache.js 模板的使用
- 第十一周阅读程序(4)
- Android -- 蓝牙开发 <一>
- 产品开发项目中文档的重要性
- android的消息处理机制(图+源码分析)——Looper,Handler,Message
- codeforces710A--King Moves水
- Mustache.js语法学习笔记
- 第十一周项目5-摩托车继承自行车和机动车
- Codeforces #369C Vanya and Scales
- Javascript语言精粹
- 第十二周阅读程序(1)
- Velocity布局(layout)功能介绍
- swift设置applicationIconBadgeNumber的值
- Spring IOC学习心得之IOC容器的初始化过程
- iOS 中的 Deferred Deep Linking(延迟深度链接)