web模板引擎mustache
来源:互联网 发布:折半查找的递归算法 编辑:程序博客网 时间:2024/06/05 21:18
Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档。当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hogan 、ASP 下的 aspTemplate、以及 PHP 下的 Smarty,这里主要介绍基于 Javascript 语言的模板引擎,目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等.
接下来我们将开启我们的mustache学习之旅!
1 何为mustache
Mustache 是一个 logic-less (轻逻辑)模板解析引擎,它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。
2 使用mustache的前提条件
为了能够使用mustche,我们必须在自己的html中引入mustache.js文件,引入方式如下:
<script type="text/javascript" src="mustache.js"></script>
如果没有该文件,可以在github上进行下载,下载链接为:http://github.com/janl/mustache.js
3 mustche语法
为了能全面的理解mustache,接下来将介绍一下其基本语法,特此说明:代码中用到的数据如下,且代码均是该js文件的一部分
<script type="text/javascript">var data = { "name": "北京骏马国际酒店", "hotel_info": { "street": "北京市海淀区中关村南路南1条甲2号", "city": "北京", "Hotel_area": "中关村商圈 ", }, "links": [ {"link_address": "http://www.youku.con"}, {"link_address": "http://www.baidu.con"}, ], "score": "<b>90</b>", "facility": ["wifi","独立卫浴"], "getCity": function(){ return this.hotel_info.city; }}</script>
- 简单的变量替换:{{name}}
var tpl = '{{name}}';var html = Mustache.render(tpl, data);console.log( html );//输出:北京骏马国际酒店
语法解释:主要的渲染方法为Mustache.render,该方法有两个参数,第一个为要渲染的模版,也就是上例中的tpl,第二个就是数据源也就是上例中的data对象
- 如果变量含有html的代码而不想转义可以用{{&score}}
var tpl = '{{&score}}';var html = Mustache.render(tpl, data);console.log( html );//输出:<b>90</b>//如果去掉&则输出:<b>90</b>
- 如果是对象,还能解释其属性
var tpl = '{{hotel_info.street}}';var html = Mustache.render(tpl, data);console.log( html );//输出:北京市海淀区中关村南路南1条甲2号
- {{#keyName}} {{/keyName}}兼有if判断和forEach的功能
var tpl = '{{#hotel_info}}{{street}}--{{city}}{{/hotel_info}}';var html = Mustache.render(tpl, data);console.log( html );//输出:北京市海淀区中关村南路南1条甲2号--北京
语法解释:以#开始、以/结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染
- 迭代
var tpl = "{{#links}}{{&link_address}}--{{/links}}";var html = Mustache.render(tpl, data);console.log( html );//输出 :http://www.youku.con--http://www.baidu.con--
- 如果迭代的是数组,还可以用{{.}}来替代每个元素
var tpl = "{{#facility}}{{.}}--{{/facility}}";var html = Mustache.render(tpl, data);console.log( html );//输出 :wifi--独立卫浴--
- 迭代输出的还可以是一个function返回的结果,function可以读取当前变量的上下文来获取其他属性执行其他操作
var tpl = "{{getCity}}";var html = Mustache.render(tpl, data);console.log( html );//输出 :北京
{{^keyName}} {{/keyName}}
该语法与{{#keyName}} {{/keyName}}类似,不同在于它是当 keyName 值为 null, undefined, false 时才渲染输出该区块内容{{>partials}} 子模块
当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块
var tpl = "<h1>{{company}}</h1> <ul>{{>info}}</ul>"var child = {info: "{{#hotel_info}}<li>{{street}}</li><li>{{city}}</li><li>{{Hotel_area}}</li>{{/hotel_info}}"};var html = Mustache.render(tpl, data, child);//输出:<h1></h1> <ul><li>北京市海淀区中关村南路南1条甲2号</li><li>北京</li><li>中关村商圈 </li></ul>
- {{!comments}} 表示注释,注释后不会渲染输出任何内容
- mustache:Web模板引擎
- web模板引擎mustache
- web模板引擎--Mustache
- nodejs web模板引擎mustache
- Web模板引擎——Mustache
- Web模板引擎——Mustache
- Web模板引擎——Mustache
- mustache模板引擎
- Mustache 模板引擎
- Web模版引擎-Mustache
- Javascript 语言的模板引擎:Mustache
- 解读前端模板引擎Mustache.js源码
- Javascript模板引擎mustache.js详解
- JS模板引擎---mustache与HandleBars
- Javascript模板引擎mustache.js详解
- Javascript 语言的模板引擎:Mustache
- Javascript 语言的模板引擎:Mustache
- Javascript 语言的模板引擎:Mustache
- 第二周项目1-旱冰场造价
- 【ToDoList】
- 完整Android CAN总线程序开发
- 蚂蚁感冒——第五届蓝桥杯省赛C语言A组第7题
- TestDisseminationC.nc
- web模板引擎mustache
- mysql数据库优化技术(2)
- Linux下DNS配置
- 数据库存储过程(Procedure)
- Android入门(二):Android工程目录结构
- Java同步方法与同步语句的对比
- 杭电 HDU 1041 Computer Transformation
- 第2周项目2-长方柱类
- Logstash+syslog