Mustache学习
Mustache是基于JavaScript的一款模版Web引擎,Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档。
一、Mustache简介
Mustache 是一个 logic-less (轻逻辑)模板解析引擎,它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。
二、Mustache语法
1、{{keyName}}
2、{{#keyName}} {{/keyName}}
3、{{^keyName}} {{/keyName}}
4、{{.}}
5、{{<partials}}
6、{{{keyName}}}
7、{{!comments}}
三、demo介绍
1、{{keyName}}
var data={
name:"张三",
age:22,
sex:"girl"
}
var template="My name is {{name}},I'm {{age}} years old,I'm a {{sex}} !";
var view=Mustache.render(template,data);
document.getElementsByTagName("body")[0].innerHTML=view;
分析:{{keyName}}中的{{}}就是Mustache的标识符,keyName就是data对象中的键名,这句的作用是直接输出与键名匹配的键值!
2、{{#keyName}} {{/keyName}} 有两种用法:
第一种:
以"#"开始,"/"结束,被它们所包围的标签为进行循环多次渲染,keyName为需要循环渲染的数组名,代码如下:
注意:这里的keyName表示需要表示需要循环渲染到html模版中的数组的数组名,
var obj={
result:[
{name:null,age:22,sex:"女"},
{name:"李四",age:22,sex:"男"},
{name:"王五",age:22,sex:"男"}]
};
var template="<table>"
+"<thead><tr><td>姓名</td><td>年龄</td><td>性别</td></tr></thead>"
+"<tbody>" +
"{{#result}}" +
"<tr>" +
"<td>{{name}}</td>" +
"<td>{{age}}</td>" +
"<td>{{sex}}</td>" +
"{{/name}}</tr>" +
"{{/result}}" +
"</tbody>"
+"</table>";
var view=Mustache.render(template,obj);
document.getElementsByTagName("body")[0].innerHTML=view;
上面的代码对result数组进行了循环渲染,以{{#result}}开始,以{{/result}}结束,中间包裹着需要循环绑定数据的标签!
第二种:
{{#keyName}} {{/keyName}}还有第二种用法,当keyName表示键名的时候,代码如下:
注意:这里的keyName表示键名,并不表示需要循环的数组名
var obj={
result:[
{name:null,age:22,sex:"女"},
{name:"李四",age:22,sex:"男"},
{name:"王五",age:22,sex:"男"}]
};
var template="<table>"
+"<thead><tr><td>姓名</td><td>年龄</td><td>性别</td></tr></thead>"
+"<tbody>" +
"{{#result}}" +
"<tr>" +
"<td>{{#name}}{{name}}</td>" +
"<td>{{age}}</td>" +
"<td>{{sex}}{{/name}}</td>" +
"</tr>" +
"{{/result}}" +
"</tbody>"
+"</table>";
var view=Mustache.render(template,obj);
document.getElementsByTagName("body")[0].innerHTML=view;
分析代码和提供的obj数据发现,result数组中的第一个对象的name属性值为空,当我们使用{{#name}}{{/name}}将<tr></tr>包围的时候,发现这个时候name为空的那一整行数据就被排除掉了,这了注意:根据{{#name}}{{/name}}放的位置的不同,会产生不同的效果!
3、{{^keyName}}{{/keyName}} 与{{#keyName}}{{/keyName}}第二种用法的作用相反,代码如下:
var obj={
result:[
{name:null,age:22,sex:"女"},
{name:"李四",age:22,sex:"男"},
{name:"王五",age:22,sex:"男"}]
};
var template="<table>"
+"<thead><tr><td>姓名</td><td>年龄</td><td>性别</td></tr></thead>"
+"<tbody>" +
"{{#result}}" +
"<tr>" +
"<td>{{^name}}</td>" +
"<td>{{age}}</td>" +
"<td>{{sex}}</td>" +
"</tr>{{/name}}" +
"{{/result}}" +
"</tbody>"
+"</table>";
var view=Mustache.render(template,obj);
document.getElementsByTagName("body")[0].innerHTML=view;
根据输出和分析上面的代码,发现{{^name}}{{/name}}再循环玩result对象数组后,只输出了name值为null的那一行值!
4、{{.}} 表示枚举,可以循环输出整个数组,例如:
var obj={
result:["Macbook ","iPhone ","iPod ","iPad "]
};
var template="<div>{{#result}}<span>{{.}}</span>{{/result}}</div>";
var view=Mustache.render(template,obj);
document.getElementsByTagName("body")[0].innerHTML=view;
分析如上代码和输出发现:{{#result}}{{/result}}表示循环的目标是result数组,{{.}}则表示循环输出result中的每一项
5、{{keyName.keyName}}
var data={
company:["Microsoft"],
adress:{
province:"浙江",
city:"湖州",
county:"安吉",
town:"报福",
village:"统里"
}
}
var template="<h1>{{company}}</h1><ul>" +
"<li>{{adress.province}}</li>" +
"<li>{{adress.city}}</li>" +
"<li>{{adress.county}}</li>" +
"<li>{{adress.town}}</li>" +
"<li>{{adress.village}}</li>" +
"</ul>";
var view=Mustache.render(template,data);
document.getElementsByTagName("body")[0].innerHTML=view;
- Go实战--实现简单的restful api
- 特殊字体神器-fontmin,秒杀一切工具
- 庖丁解牛——深入解析委托和事件
- RestQL:现代化的 API 开发方式
- 在递归函数中因不正确使用公共变量而形成死循环
- 用R语言做时间序列分析(附数据集和源码)
- Windows Live Writer插入代码vs2010插件
- 分布式队列编程优化篇
- 基于机器学习方法的POI品类推荐算法
- 【Scikit-Learn 中文文档】多类和多标签算法 - 监督学习 - 用户指南 | ApacheCN
- 【Scikit-Learn 中文文档】新异类和异常值检测 - 无监督学习 - 用户指南 | ApacheCN
- Golang中使用echo框架、MongoDB、JWT搭建REST API
- 在对象的原型上添加方法?
- KMeans聚类算法思想与可视化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
- PHP实现简单登录界面
- PHP创建XML接口示例
- PHP设计模式之单例模式入门与应用详解
- Laravel框架实现定时Task Scheduling例子
- PHP使用 Pear 进行安装和卸载包的方法详解
- Laravel5.1框架注册中间件的三种场景详解
- 浅谈laravel数据库查询返回的数据形式
- PHP设计模式之策略模式(Strategy)入门与应用案例详解
- 基于Python3读写INI配置文件过程解析
- laravel 解决paginate查询多个字段报错的问题
- php判断/计算闰年的方法小结【三种方法】
- Laravel定时任务的每秒执行代码
- PHP学习记录之面向对象(Object-oriented programming,OOP)基础【类、对象、继承等】
- Python通过zookeeper实现分布式服务代码解析