JS模板引擎像百度的baiduTemplate(百度)\artTemplate(腾讯)\juicer(淘宝)\doTtmplhandlebarseasyTemplateunderscoretemplate \ mustache \kissytemplate

doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数

引入 javascript 文件:

<script type="text/javascript" src="doT.js"></script>

doT.templateSettings - 默认编译设置

可以通过改变编译设置自定义 doT。这是默认设置:

doT.templateSettings = {
evaluate: /\{\{([\s\S]+?)\}\}/g,
interpolate: /\{\{=([\s\S]+?)\}\}/g,
encode: /\{\{!([\s\S]+?)\}\}/g,
use: /\{\{#([\s\S]+?)\}\}/g,
define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
iterate: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
varname: 'it',
strip: true,
append: true,
selfcontained: false
};

如果你想用自己的定界符,可以修改 doT.templateSettings 中的正则表达式。

这是默认的定界符列表:

{{ }}    用于求值(evaluation)
{{= }} 用于插值(interpolation)
{{! }} 用于编码求值(interpolation with encoding)
{{# }} 用于编译时求值/引入和局部模板(compile-time evaluation/includes and partials)
{{## #}} 用于编译时定义(compile-time defines)
{{? }} 条件语句(conditionals)
{{~ }} 数组迭代(array iteration)

调用方式:
var tmpText = doT.template(模板);
tmpText(数据源);

用法示例:

for 循环前判断循环的list是否为空

        <script id="invoiceListDot" type="text/x-dot-template">
{{? it.invoiceInfoDtos}}
{{ for(var prop=;prop
<it.invoiceInfoDtos.length
; prop++){ }}
<div class="{{ if(prop==0){}}invoice-infor {{ }else {}}no-invoice{{ }}}" data-index="{{= prop }}">
<span class="no-ivoice-icon"></span>
<span>普通发票</span>
<span class="ivo-margin">{{= it.invoiceInfoDtos[prop].content }}</span>
<span class="ivo-margin">{{= it.invoiceInfoDtos[prop].title }}</span>
<span class="ivo-margin">{{= it.invoiceInfoDtos[prop].address }}</span>
<span class="ivo-margin">{{= it.invoiceInfoDtos[prop].receiver }}</span>
<span class="ivo-margin">{{= it.invoiceInfoDtos[prop].phone }}</span>
</div>
{{ } }}
{{?}}
</script>

嵌套for循环的使用

(1)json数据结构:

var goods_list = {
"list": [
{
"id": "",
"name": "衣服",
"goods": [
{
"goods_id": "",
"name": "衣服1",
"price": "",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "",
"name": "衣服2",
"price": "",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
},
{
"id": "",
"name": "鞋子",
"goods": [
{
"goods_id": "",
"name": "鞋子1",
"price": "",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "",
"name": "鞋子2",
"price": "",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
}
]
};

(2)区域与页面的构建

    <div id="category-goods"></div>
<!-- 必须加上type="text/x-dot-template" -->
<script id="category-goods-tmpl" type="text/x-dot-template">
{{ for(var i=, catlen=it.length; i<catlen; i++) { }}
<div class="rxsp">
<div class="aui-pull-left"><h3> {{= it[i].name }} </h3></div>
<a class="aui-pull-right ">
查看更多
<span class="aui-iconfont aui-icon-right"></span>
</a>
</div> <div class="aui-list-item-inner">
<div class="aui-row aui-row-padded">
{{ for(var j=, goodslen=it[i]['goods'].length; j<goodslen; j++) { }}
<div class="aui-col-xs-6">
<img src="{{= it[i]['goods'][j].logoimg }}" onclick="openWin('goods_detail')">
<p class="tit">{{= it[i]['goods'][j].name }} </p>
<div class="aui-info" style="padding-top:0">
<div class="aui-info-item">
<span class="red">¥{{= it[i]['goods'][j].price }}<!-- <span class="jifen"> 积分1000</span></span> -->
</div>
</div>
</div>
{{ } }}
</div>
</div>
{{ } }}
</script>

(3)绑定到容器

    var evalText = doT.template($("#category-goods-tmpl").text());
$("#category-goods").html(evalText(goods));

宏的使用

<div class="content" id="serviceItem">
{{##def.spaceUnit:
{{? it.productPrice.policyInfo.storageUnit== }}K{{?? it.productPrice.policyInfo.storageUnit==}}M{{??
it.productPrice.policyInfo.storageUnit==}}G {{?? }}T {{? }}
#}} <div class="buy-list">
<ul>
<li class="buy-name">购买时长:</li>
<li class="buy-select"><p>{{=it.productPrice.userPeriod}}个月</p></li>
<li class="buy-unit"></li>
<li class="buy-state">预计到期时间:{{=it.productPrice.endTime}}</li>
</ul>
</div>
<div class="buy-list">
<ul>
<li class="buy-name">用户数:</li>
<li class="buy-select"><input name="userCount" onkeypress="eventUtil.onlyNumberKeyPress(event)"
type="text"></li>
<li class="buy-unit">人</li>
<li class="buy-state">用户单价 {{=it.productPrice.normalPriceDto.userPeriodPrice}}元/人
{{? it.productPrice.policyInfoDto.periodUnit== }} 年{{??
it.productPrice.policyInfoDto.periodUnit==}}月{{??
it.productPrice.policyInfoDto.periodUnit==}}天 {{?? }}单位未知 {{? }}
<span class="warning">(目前只支持200人以内的团队)</span></li>
</ul>
</div> <div class="buy-list">
<ul>
<li class="buy-name">扩容空间(所有):</li>
<li class="buy-select"><input name="expansion_storage"
onkeypress="eventUtil.onlyNumberKeyPress(event)" type="text"></li>
<li class="buy-unit">{{#def.spaceUnit}}</li>
<li class="buy-state">空间单价 {{=it.productPrice.normalPriceDto.storagePrice}}元/
{{#def.spaceUnit}}
</li>
</ul>
</div>
</div>

最常规用法{{=it.attr}}

数据源:{"name":"Jake","age":}
区域:<div id="interpolation"></div>
模板:
<script id="interpolationtmpl" type="text/x-dot-template">
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>
</script>
调用方式:
var dataInter = {"name":"Jake","age":};
var interText = doT.template($("#interpolationtmpl").text());
$("#interpolation").html(interText(dataInter));

for evaluation for in 循环

格式:
{{ for var key in data { }}
{{= key }}
{{ } }} 数据源:{"name":"Jake","age":,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":""}} 区域:<div id="evaluation"></div> 模板: <script id="evaluationtmpl" type="text/x-dot-template">
{{ for(var prop in it) { }}
<div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
{{ } }}
</script> 调用方式: var dataEval = {"name":"Jake","age":,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":""}};
var evalText = doT.template($("#evaluationtmpl").text());
$("#evaluation").html(evalText(dataEval));

循环数组{{~}}

格式:
{{~data.array :value:index }}
...
{{~}} 数据源:{"array":["banana","apple","orange"]}
区域:<div id="arrays"></div>
模板:
<script id="arraystmpl" type="text/x-dot-template">
{{~it.array:value:index}}
<div>{{= index+ }}{{= value }}!</div>
{{~}}
</script>
调用方式:
var dataArr = {"array":["banana","apple","orange"]};
var arrText = doT.template($("#arraystmpl").text());
$("#arrays").html(arrText(dataArr));

条件渲染{{?}}{{??}},相当于原生的if else if

格式:
{{? }} if
{{?? }} else if
{{??}} else
数据源:{"name":"Jake","age":}
区域:<div id="condition"></div>
模板:
<script id="conditionstmpl" type="text/x-dot-template">
{{? !it.name }}
<div>Oh, I love your name, {{=it.name}}!</div>
{{?? !it.age === }}
<div>Guess nobody named you yet!</div>
{{??}}
You are {{=it.age}} and still dont have a name?
{{?}}
</script>
调用方式:
var dataEncode = {"uri":"http://bebedo.com/?keywords=Yoga","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var EncodeText = doT.template($("#encodetmpl").text());
$("#encode").html(EncodeText(dataEncode));

编码渲染{{!}},主要是为了防止代码注入以保障安全,如传入一个HTML片段或js片段,它会以字符串的形式渲染

数据源:{"uri":"http://bebedo.com/?keywords=Yoga"}
格式:
{{!it.uri}}
区域:<div id="encode"></div>
模板:
<script id="encodetmpl" type="text/x-dot-template">
Visit {{!it.uri}} {{!it.html}}
</script>
调用方式:
var dataEncode = {"uri":"http://bebedo.com/?keywords=Yoga","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var EncodeText = doT.template($("#encodetmpl").text());
$("#encode").html(EncodeText(dataEncode));

支持共用模块定义{{##def.}}定义,{{#def.}}引用模块

数据源:{"name":"Jake","age":}
区域:<div id="part"></div>
模板:
<script id="parttmpl" type="text/x-dot-template">
{{##def.snippet:
<div>{{=it.name}}</div>{{#def.joke}}
#}}
{{#def.snippet}}
{{=it.html}}
</script>
调用方式:
var dataPart = {"name":"Jake","age":,"html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var defPart = {"joke":"<div>{{=it.name}} who?</div>"};
var partText = doT.template($("#parttmpl").text(), undefined, defPart);
$("#part").html(partText(dataPart));
//个人用例
window.onload = function () {
dotFunc = doT.template(document.getElementById("tmpl").innerHTML);
/*dotFunc = doT.template($("#tmpl").text()); //与上行等同*/
/*console.log('dotFunc', dotFunc);*/
/*printOrders("[{SerialNumber:'01234567891'}]");*/
/* printOrders("[{SerialNumber:'01234567891',SendTime:'2016-11-18 12:00:22',Consignee:'小店店长',ConsigneeTel:'18702111777',ConsigneeAddress:'玄武区苏宁大道1号预约1116002',OrderPartnerNo:'yg1010',AmountMoney:8888.12,Amount:1111,OrderDetails:[{MainCommodityName:'家佳康精装冰鲜肋排500g',Amount:8,Price:1111,AmountMoney:8888},{MainCommodityName:'家佳康精装冰鲜肋排800g',Amount:9,Price:111.11,AmountMoney:999.99}]}]");
}*/
function printOrders(ordersJSON) {
try {
var orders = eval(ordersJSON);
if (orders.length && orders.length > ) {
$("#container").html(dotFunc({orders: orders}));
$(".barcode").each(function (index, element) {
$(this).empty().barcode(orders[index].SerialNumber, barcodeType, barcodeSettings)
});
}
return orders.length > ;
} catch (e) {
return false;
}
}

参考文摘:

http://jinlong.github.io/doT/

http://olado.github.io/doT/index.html

http://www.mamicode.com/info-detail-874833.html

http://www.cnblogs.com/kuikui/p/3505768.html

模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环···的更多相关文章

  1. 前端模板引擎doT.js的使用

    前言 我们在做前端开发时,经常需要根据后台返回的json数据动态生成html并插入到页面中显示.最简单的方法就是通过jQuery去遍历数据拼接html,如以下: <script> var ...

  2. 前端模板引擎doT.js的用法

    简介 一款简单好用的前端模板引擎 用法 <script type="text/javascript" src="js/doT.min.js">< ...

  3. 模板引擎doT.js

    作为一名前端攻城师,经常会遇到从后台ajax拉取数据再显示在页面的情境,一开始我们都是从后台拉取再用字符串拼接的方式去更达到数据显示在页面! <!-- 显示区域 --> <div i ...

  4. 模板引擎doT.js用法详解

    作为一名前端攻城师,经常会遇到从后台ajax拉取数据再显示在页面的情境,一开始我们都是从后台拉取再用字符串拼接的方式去更达到数据显示在页面! <!-- 显示区域 --> <div i ...

  5. 模板引擎mustache.js

    Javascript模板引擎mustache.js详解   阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...

  6. JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   template.js 一款 JavaScript 模板引 ...

  7. 探究Javascript模板引擎mustache.js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...

  8. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  9. 关于模板引擎handlebars.js基本用法

    说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...

随机推荐

  1. 【笨嘴拙舌WINDOWS】编码历史

    在介绍历史之前,有必要将一个经常使用的词语"标准"解释一下: " 标准是"为了在一定的范围内获得最佳秩序,经协商一致制定并由公认机构批准,共同使用的和重复使用的 ...

  2. Sass结合Modernizr的使用方法

    Modernizr在初始化的时候会首先找寻class=“no-js”的元素: <!DOCTYPE html> <html class="no-js"> &l ...

  3. UVa 12304 (6个二维几何问题合集) 2D Geometry 110 in 1!

    这个题能1A纯属运气,要是WA掉,可真不知道该怎么去调了. 题意: 这是完全独立的6个子问题.代码中是根据字符串的长度来区分问题编号的. 给出三角形三点坐标,求外接圆圆心和半径. 给出三角形三点坐标, ...

  4. fancybox 无效 失效 直接打开页面, ajax 之后 fancybox对更新的数据无效,Jquery失效 无效

    案例:做个聊天室项目,数据都是通过ajax刷新出来的,而对新数据绑定的fancybox均无效,点击直接打开到了新页面而不是弹窗,解决方法其实很简单   简单分析:ajax加载内容是在$(documen ...

  5. Mysql读写分离(mysql-proxy)

    MySQL-Proxy是一个处于你的client端和MySQL server端之间的简单程序,它可以监测.分析或改变它们的通信.它使用灵活,没有限制,常见的用途包括:负载平衡,故障.查询分析,查询过滤 ...

  6. 转载RabbitMQ入门(4)--路由

    路由 (使用Java客户端) 在先前的指南中,我们建立了一个简单的日志系统.我们可以将我们的日志信息广播到多个接收者. 在这部分的指南中,我们将要往其中添加一个功能-让仅仅订阅一个消息的子集成为可能. ...

  7. 【转】 CATransform3D 矩阵变换之立方体旋转实现细节

    原文网址:http://blog.csdn.net/ch_soft/article/details/7351896 第一部分.前几天做动画,使用到了CATransform3D ,由于没有学过计算机图形 ...

  8. 【转】Android开发学习笔记:5大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...

  9. ch03-文字版面的设计

    Ch03: 文字版面的编辑 3.1 版面控制标记 3.1.1 取消文字换行: <NOBR> 1-取消换行文字实例:1-取消换行文字实例; 1-取消换行文字实例; 2-取消换行文字实例:2- ...

  10. java web 学习十四(JSP原理)

    一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...