doT.js模板用法
前提：引入doT.min.js：
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/doT.min.js"></script>
(1)、基本用法{{=it.attr}}
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">//模板存放区域 修改type类型，以免会被解析成js
<p>
<span>姓名：{{=it.name}}</span>
</p>
</script>
<script>
var testjson={
"name":"张三"
},
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>
(2)、循环数组用法{{~}}
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<ul>
{{~it:value:index}}
<li>
<span>姓名：{{=value.name}}</span>
</li>
{{~}}
</ul>
</script>
<script>
var testjson=[
{"name":"张三","age":31,"fun":"吃东西"}
],
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>
(3)、条件判断{{？}}{{？？}}, 就是(if else if)
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<ul>
{{~it:value:index}}
{{?!value.age}}
<li>
<span>姓名：{{=value.name}}</span>
<span>年龄：年龄数据缺失</span>
<span>爱好：{{=value.fun}}</span>
</li>
{{??!value.fun}}
<li>
<span>姓名：{{=value.name}}</span>
<span>年龄：{{=value.age}}</span>
<span>爱好：无趣的人</span>
</li>
{{??}}
<li>
<span>姓名：{{=value.name}}</span>
<span>年龄：{{=value.age}}</span>
<span>爱好：{{=value.fun}}</span>
</li>
{{?}}
{{~}}
</ul>
</script>
<script>
var testjson=[
{"name":"张三","age":31,"fun":"吃东西"},
{"name":"李四","fun":"上网"},
{"name":"王五","age":70}
],
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>
(4)、编码渲染{{!}}
主要是为了防止代码注入以保障安全，如传入一个HTML片段或js片段，它会以字符串的形式渲染
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<ul>
{{~it:value:index}}
{{?value.bz}}
<li>
<span>姓名：{{=value.name}}</span>
<span>年龄：{{=value.age}}</span>
<span>爱好：{{!value.html}}</span>
</li>
{{??}}
<li>
<span>姓名：{{=value.name}}</span>
<span>年龄：{{=value.age}}</span>
<span>爱好：{{=value.html}}</span>
</li>
{{?}}
{{~}}
</ul>
</script>
<script>
var testjson=[
{"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
],
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>
(5)、支持共用模块定义{{##def.}}定义，{{#def.}}引用模块
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<!-- 模块定义0 -->
{{##def.togeter0:
<li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{!value.html}}</span></li>
#}}
<!-- 模块定义1 -->
{{##def.togeter1:
<li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{=value.html}}</span></li>
#}}
<ul>
{{~it:value:index}}
{{?value.bz}}
<!-- 引用模块0 -->
{{#def.togeter0}}
{{??}}
<!-- 引用模块1 -->
{{#def.togeter1}}
{{?}}
{{~}}
</ul>
</script>
<script>
var testjson=[
{"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
],
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>
注：模块定义也可以一个json数据定义，再在生成模板函数函数的时候传入即可，示例如下，其中tmpljson就是在外面以json定义的模块：
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<!-- 模块定义0 -->
{{##def.togeter0:
<li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{!value.html}}</span></li>
#}}
<!-- 模块定义1 -->
{{##def.togeter1:
<li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{=value.html}}</span></li>
#}}
<ul>
{{~it:value:index}}
{{?value.bz===true}}
<!-- 引用模块0 -->
{{#def.togeter0}}
{{??value.bz===false}}
<!-- 引用模块1 -->
{{#def.togeter1}}
{{??}}
<!-- 引用传入的模块 -->
{{#def.testmode}}
{{?}}
{{~}}
</ul>
</script>
<script>
var testjson=[
{"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false},
{"name":"李四","age":24,"html":"<b>哈哈</b>"}
],
tmpljson={"testmode":"<li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span></li>"}//以json格式定义模块
tmpltxt=doT.template(document.getElementById("useType0").innerHTML,undefined,tmpljson);//生成模板方法,传入了json定义的模块
document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>
(6)、用原生的循环，条件渲染
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<!-- 模块定义0 -->
{{##def.togeter0:
<li><span>姓名：{{=itz.name}}</span><span>年龄：{{=itz.age}}</span><span>爱好：{{!itz.html}}</span></li>
#}}
<!-- 模块定义1 -->
{{##def.togeter1:
<li><span>姓名：{{=itz.name}}</span><span>年龄：{{=itz.age}}</span><span>爱好：{{=itz.html}}</span></li>
#}}
<ul>
{{ for(var i=0;i<it.length;i++){ }}
{{ var itz=it[i]; }}
{{ if(itz.bz){ }}
<!-- 引用模块0 -->
{{#def.togeter0}}
{{ }else{ }}
<!-- 引用模块1 -->
{{#def.togeter1}}
{{ } }}
{{ } }}
</ul>
</script>
<script>
var testjson=[
{"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
],
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>
(7)、嵌套循环（很常用）
<div id="category-goods"></div>
<script id="category-goods-tmpl" type="text/x-dot-template">
{{~it:item:index}}
<div class="rxsp">
<div class="aui-pull-left">
<h3> {{= item.name }} 【索引： {{= index }} 】</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">
{{~it[index].goods:item:j}}
<div class="aui-col-xs-6">
<img src="{{= item.logoimg }}" onclick="">
<p class="tit">{{= item.name }} </p>
<div class="aui-info" style="padding-top:0">
<div class="aui-info-item">
<span class="red">￥{{= item.price }}
</div>
</div>
</div>
{{~}}
</div>
</div>
{{~}}
</script>
<script type="text/javascript">
var goods_list = {
"list": [{
"id": "1",
"name": "衣服",
"goods": [{
"goods_id": "1",
"name": "衣服1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "2",
"name": "衣服2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
},
{
"id": "2",
"name": "鞋子",
"goods": [{
"goods_id": "3",
"name": "鞋子1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "4",
"name": "鞋子2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
}
]
};
var evalText = doT.template($("#category-goods-tmpl").html());
$("#category-goods").html(evalText(goods_list.list));
</script>
doT.js模板用法的更多相关文章
- doT js模板入门
doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...
- doT.js模板引擎及基础原理
时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...
- doT.js模板和pagination分页应用
doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...
- doT js模板入门 2
doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手 {{–><% }}–>%> 比如: <div id="evaluationtmp ...
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...
- doT js模板入门 3
for 循环前推断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"&g ...
- 前端模板引擎doT.js的用法
简介 一款简单好用的前端模板引擎 用法 <script type="text/javascript" src="js/doT.min.js">< ...
- dot.js模板实现分离式
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
随机推荐
- jQuery选择器整理+知识总结
jQuery选择器 没有不会遗忘的知识,还是做个总结吧! 一.基本分类 jQuery选择器大致可以分为两类,基本选择器和过滤选择器,总体结构体系如下: 二.基本选择器 基本选择器又可以分为三种,分 ...
- 20 个 .NET 6 新增的 API
DateOnly & TimeOnly .NET 6 引入了两种期待已久的类型 - DateOnly 和 TimeOnly, 它们分别代表DateTime的日期和时间部分. DateOnly ...
- shell脚本 binlog方式增量备份mysql
一.简介 源码地址 日期:2018/4/12 介绍:复制Binlog日志方式的增量备份脚本,并保存固定天数的备份 效果图: 二.使用 适用:centos6+ 语言:中文 注意:使用前先修改脚本中变量 ...
- .net 6 (.net core) 发布到linux docker中
第一步:VMware 安装 虚拟机Linux系统,本文以 CentOS 为例 .
- redis查看redis 客户端状态
查看redis客户端连接 redis-cli info clients # Clients connected_clients:6000 client_longest_output_list:0 cl ...
- 一种实用性较强的求IOU的算法（任意多边形之间的IOU）
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- 【LeetCode】342. Power of Four 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 迭代 位运算 函数法 日期 [LeetCode ...
- 【LeetCode】979. Distribute Coins in Binary Tree 解题报告（C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcod ...
- Matrix(poj2155)
Matrix Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 25139 Accepted: 9314 Descripti ...
- EXCEL技能 | EXCEL中实现地图快照，截大图、加水印、保存PNG、TIF、HTML文件
1 应用场景 本文分享笔者使用EXCEL制作地图的体验. 之前网上有人介绍使用小O地图EXCEL插件版能够在EXCEL中标注地图.绘制地图.可视化数据等操作.如下截图.笔者通过实验,其软件保存方式只能 ...