doT js模板入门
doT.js github地址:
doT.js 官方站点
实例1:简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../doT.js"></script>
<script type="text/javascript" src="http://hbjltv.com/static/js/jquery-1.11.1.js"></script>
</head>
<body>
<div id="interpolationtmpl">
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>
</div>
<hr/>
<div id="interpolation"></div>
<script type="text/javascript">
var dataInter = {"name": "Jake", "age": 31};
var interText = doT.template($("#interpolationtmpl").html());
$("#interpolation").html(interText(dataInter));
</script>
</body>
</html>
执行结果:
实例二:条件推断
<body>
<div id="conditionstmpl">
{{?
!it.name }}
<div> 你还没有名字</div>
{{?? }}
<div>Oh, I love your name, {{=it.name}}!</div>
{{?
}}
</div>
<hr/>
<div id="condition"></div>
<script type="text/javascript">
var dataEncode = {"name": "黄威", "age": 31};
var interText = doT.template($("#conditionstmpl").html());
$("#condition").html(interText(dataEncode));
</script>
</body>
执行结果:
if条件推断 还有另外一种写法:
<body>
<div id="conditionstmpl">
{{ if(!it.name){ }}
<div> 你还没有名字</div>
{{ } else { }}
<div>Oh, I love your name, {{=it.name}}!</div>
{{ } }}
</div>
<hr/>
<div id="condition"></div>
<script type="text/javascript">
var dataEncode = {"name": "", "age": 31};
var interText = doT.template($("#conditionstmpl").html());
$("#condition").html(interText(dataEncode));
</script>
</body>
实例三:循环+条件推断
<body>
<div id="evaluationtmpl">
{{ for(var prop in it) { }}
{{? typeof it[prop]=='object' }}
<div style="font-weight: bold;" >KEY:{{= prop }}---VALUE:</div>
{{ for(var prop2 in it[prop]) { }}
<div style="margin-left: 20px;" >key:{{= prop2 }}---value:{{= it[prop][prop2] }}</div>
{{ } }}
{{?
? }}
<div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
{{?
}}
{{ } }}
</div>
<hr/>
<div id="evaluation"></div>
<script type="text/javascript">
var dataEval = {
"name": "Jake",
"age": 31,
"interests": ["basketball", "hockey", "photography"],
"contact": {"email": "jake@xyz.com", "phone": "999999999"}
};
var evalText = doT.template($("#evaluationtmpl").html());
$("#evaluation").html(evalText(dataEval));
</script>
</body>
执行结果:
普通循环(不是foreach)
<script id="cuslist" type="text/x-dot-template">
{{ for(var prop in it){ }}
<table>
{{? typeof it[prop]['appName']=='object' }}
<tr > <td rowspan="{{=it[prop]['appName'].length}}" >{{=it[prop]['cusName']}}</td>
<td >{{=it[prop]['appName'][0]}}</td>
</tr>
{{ for(var prop2=1;prop2 <it[prop]['appName'].length; prop2++ ){ }}
<tr><td >{{=it[prop]['appName'][prop2]}}</td></tr>
{{ } }}
{{?
? }}
<tr><td >{{=it[prop]['cusName']}}</td><td >{{=it[prop]['appName']}}</td></tr>
{{?
}}
</table>
{{ } }}
</script>
源代码下载地址:
doT 源代码及实例
说明:
1,{{? typeof it[prop]==’object’ }} 表示条件推断,结束标签是{{?}}
2, {{?? }}是条件推断的else
3,{{ 和{{? 中均能够使用原生的js语法,如for,typeof 等
4,模板并非一定要放在script标签中,也能够放在隐藏的div标签中
參考:doT js模板入门 2
doT js模板入门的更多相关文章
- doT js模板入门 2
doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手 {{–><% }}–>%> 比如: <div id="evaluationtmp ...
- doT js模板入门 3
for 循环前推断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"&g ...
- doT.js模板引擎及基础原理
时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...
- doT.js模板和pagination分页应用
doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...
- doT.js模板用法
前提:引入doT.min.js: <script type="text/javascript" src="js/jquery.js"></sc ...
- dot.js模板实现分离式
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- 模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环···
doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数 引入 javascript 文件: <script type=" ...
随机推荐
- sobel流水线操作Verilog程序
sobel算子的verilog实现,采用了流水线操作 module sobel_computer ( clock , reset, OrigDataEn, //SobelAluEn, OrigData ...
- 原生js仿jquery--animate效果
效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- iOS开发之计算动态cell的高度并缓存
项目中有个类似微博那样的动态cell,文字和图片的多少都不是确定的 刚开始使用autolayout,结果很多问题,最后我发现了一个框架 FDTemplateLayoutCell 写的很好,自动布局ce ...
- Clojure学习02:语法
相比我们传统的 c ,java ,python ,javascript等,Clojure的语法比较特别,初一看,还可能会有些不适应. 本文来介绍下Clojure的语法特点. 一.表达式 所有的Cloj ...
- poj 3370 鸽笼原理知识小结
中学就听说过抽屉原理,可惜一直没机会见识,现在这题有鸽笼原理的结论,但其实知不知道鸽笼原理都可以做 先总结一下鸽笼原理: 有n+1件或n+1件以上的物品要放到n个抽屉中,那么至少有一个抽屉里有两个或两 ...
- iOS 打印日志的保存 (一)
当我们真机调试app的时候,作为开发人员的我们可以很方便的通过Xcode的debug area查看相关的打印信息.而测试人员在对app进行测试的时候,一旦出现了crash,这时我们就需要把相关的打印信 ...
- android使用自己定义属性AttributeSet
这里为了演示使用自己定义变量,字体大小改用自己定义的属性. 首先要创建变量,创建了个values/attrs.xml文件,文件名称随意,可是要在values文件夹下: <?xml version ...
- Sql 参数的使用
代码片段: a)声明实例 1.声明SQLCommand实例. SqlCommand cmd = new SqlCommand(); 2.声明SqlDataAdapter实例. SqlDataAdapt ...
- 03-UIKit、VC之间正向反向传值、代理
目录: 一.正向传值 二.反向传值 三.代理模式 回到顶部 正向传值:就是把第一个界面的值传给第二个界面显示,其简单实现方法 1 首先在第一个界面中要有一个textField输入框,一个按钮butto ...
- ie6背景透明的设置方法 ie6背景颜色透明和png图像透明解决方法
IE6浏览器,让我们又爱又恨.爱它的是,可以让我们写的代码的时候,可以更标准,恨的是,它有太多无厘头的IE6常见bug(详情点击),让我们焦头烂额.现在现在用百度浏览器调查,国内占有率不到6%了,但是 ...