mustache.js的使用说明
来源:互联网 发布:百度数据开放平台 编辑:程序博客网 时间:2024/05/18 03:32
看了Mustache的github,学学其中的语法,做个笔记
1.简单的变量替换:{{name}}
var data = { "name": "Willy" };Mustache.render("{{name}} is awesome.",data);
返回结果 Willy is awesome.
2.如果变量含有html的代码的,例如:<br>、<tr>等等而不想转义可以在用{{&name}}
var data = { "name" : "<br>Willy<br>" }; var output = Mustache.render("{{&name}} is awesome.", data); console.log(output);
结果:<br>Willy<br> is awesome.
去掉"&"的结果是转义为:<br>Willy<br> is awesome.(默认将"<"和">"转义)
3.如果是对象,还能解释其属性
var data = { "name" : { "first" : "Chen", "last" : "Jackson" }, "age" : 18 }; var output = Mustache.render( "name:{{name.first}} {{name.last}},age:{{age}}", data); console.log(output);
结果:name:Chen Jackson,age:18
4.{{#param}}这个标签很强大,有if判断、forEach的功能。
var data = { "nothin":true }; var output = Mustache.render( "Shown.{{#nothin}}Never shown!{{/nothin}}", data); console.log(output);
如果nothin是空或者null,或者是false都会输出Shown.相反则是Shown.Never shown!。
5.迭代
var data = { "stooges" : [ { "name" : "Moe" }, { "name" : "Larry" }, { "name" : "Curly" } ] }; var output = Mustache.render("{{#stooges}}<b>{{name}}</b>{{/stooges}}", data); console.log(output);
输出:<b>Moe</b>
<b>Larry</b>
<b>Curly</b>
6.如果迭代的是数组,还可以用{{.}}来替代每个元素
var data = { "musketeers" : [ "Athos", "Aramis", "Porthos", "D'Artagnan" ] }; var output = Mustache.render("{{#musketeers}}* {{&.}}{{/musketeers}}", data); console.log(output);
输出:* Athos
* Aramis
* Porthos
* D'Artagnan
7.迭代输出的还可以是一个function返回的结果,function可以读取当前变量的上下文来获取其他属性执行其他操作
var data = { "beatles" : [ { "firstName" : "John", "lastName" : "Lennon" }, { "firstName" : "Paul", "lastName" : "McCartney" }, { "firstName" : "George", "lastName" : "Harrison" }, { "firstName" : "Ringo", "lastName" : "Starr" } ], "name" : function() { return this.firstName + " " + this.lastName; } }; var output = Mustache .render("{{#beatles}} *{{name}}{{/beatles}}", data); console.log(output);
输出: *John Lennon
*Paul McCartney
*George Harrison
*Ringo Starr
8:方法里面可以再执行变量中的表达式
var data = { "name" : "{{age}}" + "Tater", "bold" : function() { return function(text, render) { console.log(text); return "<b>" + render(text) + "</b>"; }; }, "age" : 18 }; var output = Mustache.render("{{#bold}}Hi {{name}}.{{/bold}}", data); console.log(output);
输出结果:
Hi {{age}}Tater.
<b>Hi 18Tater.</b>
9.{{^}}与{{#}}相反,如果变量是null、undefined、 false、和空数组讲输出结果
10.{{! }}注释
- mustache.js的使用说明
- mustache.js的使用说明
- mustache.js的使用说明
- mustache.js的一些例子
- Mustache.js 模板的使用
- js template 和 Mustache。Mustache额使用
- 教程: Mustache.js
- Mustache.js语法
- mustache.js使用笔记
- javascript库之Mustache库使用说明
- javascript库之Mustache库使用说明
- javascript库之Mustache库使用说明
- mustache.js官网教程
- Mustache.js语法学习笔记
- Mustache的简单使用
- mustache 的使用
- js模板引擎库mustache中类似if判断的处理 及handlebars.js
- Tutorial: HTML Templates with Mustache.js
- OC 函数库方法
- Android 禁止下拉状态栏和底部导航栏的控制
- CUDA之矩阵乘法——TILE&sharedmemory
- 新型电话诈骗手法“明天到我办公室来一下”全揭秘
- TCP/IP——数据分段(分片)与重组
- mustache.js的使用说明
- hadoop 压缩工具 比较
- 网易视频云技术分享:linux软raid的bitmap分析
- Spring 定时任务之 @Scheduled cron表达式
- bsurfaces插件
- hash算法 (hashmap 实现原理) Java实现的散列表
- HashSet集合用法
- C++Qt5调用 php-cgi.exe运行 php程序
- Fortran 函数中单精度,双精度不匹配的错误