doT.js github地址:

doT.js 官方站点

实例1:简单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script type="text/javascript" src="../../doT.js"></script>
  7.     <script type="text/javascript" src="http://hbjltv.com/static/js/jquery-1.11.1.js"></script>
  8. </head>
  9. <body>
  10. <div id="interpolationtmpl">
  11.     <div>Hi {{=it.name}}!</div>
  12.     <div>{{=it.age || ''}}</div>
  13. </div>
  14. <hr/>
  15. <div id="interpolation"></div>
  16. <script type="text/javascript">
  17.     var dataInter = {"name": "Jake", "age": 31};
  18.     var interText = doT.template($("#interpolationtmpl").html());
  19.     $("#interpolation").html(interText(dataInter));
  20. </script>
  21. </body>
  22. </html>

执行结果:

实例二:条件推断

  1. <body>
  2. <div id="conditionstmpl">
  3.     {{?
  5. !it.name }}
  6.     <div> 你还没有名字</div>
  7.     {{?? }}
  8.     <div>Oh, I love your name, {{=it.name}}!</div>
  9.     {{?
  11. }}
  12. </div>
  13. <hr/>
  14. <div id="condition"></div>
  15. <script type="text/javascript">
  16.     var dataEncode = {"name": "黄威", "age": 31};
  17.     var interText = doT.template($("#conditionstmpl").html());
  18.     $("#condition").html(interText(dataEncode));
  19. </script>
  20. </body>

执行结果:

if条件推断 还有另外一种写法:

  1. <body>
  2. <div id="conditionstmpl">
  3.     {{ if(!it.name){ }}
  4.     <div> 你还没有名字</div>
  5.     {{ } else { }}
  6.     <div>Oh, I love your name, {{=it.name}}!</div>
  7.     {{ }  }}
  8. </div>
  9. <hr/>
  10. <div id="condition"></div>
  11. <script type="text/javascript">
  12.     var dataEncode = {"name": "", "age": 31};
  13.     var interText = doT.template($("#conditionstmpl").html());
  14.     $("#condition").html(interText(dataEncode));
  15. </script>
  16. </body>

实例三:循环+条件推断

  1. <body>
  2. <div id="evaluationtmpl">
  3.     {{ for(var prop in it) { }}
  4.         {{? typeof it[prop]=='object' }}
  5.             <div style="font-weight: bold;" >KEY:{{= prop }}---VALUE:</div>
  6.             {{ for(var prop2 in it[prop]) { }}
  7.                 <div style="margin-left: 20px;" >key:{{= prop2 }}---value:{{= it[prop][prop2] }}</div>
  8.             {{ } }}
  9.         {{?
  11. ? }}
  12.             <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
  13.         {{?
  15. }}
  17.     {{ } }}
  18. </div>
  19. <hr/>
  20. <div id="evaluation"></div>
  21. <script type="text/javascript">
  22.     var dataEval = {
  23.         "name": "Jake",
  24.         "age": 31,
  25.         "interests": ["basketball", "hockey", "photography"],
  26.         "contact": {"email": "jake@xyz.com", "phone": "999999999"}
  27.     };
  28.     var evalText = doT.template($("#evaluationtmpl").html());
  29.     $("#evaluation").html(evalText(dataEval));
  30. </script>
  31. </body>

执行结果:

普通循环(不是foreach)

  1. <script id="cuslist" type="text/x-dot-template">
  3. {{ for(var prop in it){  }}
  4. <table>
  5.     {{? typeof it[prop]['appName']=='object' }}
  6.         <tr  > <td rowspan="{{=it[prop]['appName'].length}}" >{{=it[prop]['cusName']}}</td>
  7.         <td  >{{=it[prop]['appName'][0]}}</td>
  8.         </tr>
  9.         {{ for(var prop2=1;prop2 <it[prop]['appName'].length; prop2++ ){ }}
  10.             <tr><td  >{{=it[prop]['appName'][prop2]}}</td></tr>
  11.         {{ } }}
  12.     {{?
  14. ? }}
  15.         <tr><td >{{=it[prop]['cusName']}}</td><td >{{=it[prop]['appName']}}</td></tr>
  16.     {{?
  18. }}
  19. </table>
  20. {{ } }}
  22. </script>

源代码下载地址:

doT 源代码及实例

说明:

1,{{? typeof it[prop]==’object’ }} 表示条件推断,结束标签是{{?}}

2, {{?? }}是条件推断的else

3,{{ 和{{? 中均能够使用原生的js语法,如for,typeof 等

4,模板并非一定要放在script标签中,也能够放在隐藏的div标签中

參考:doT js模板入门 2

作者: 黄威

博客地址:

CSDN博客主页

itEye博客主页

doT js模板入门的更多相关文章

  1. doT js模板入门 2

    doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手 {{–><% }}–>%> 比如: <div id="evaluationtmp ...

  2. doT js模板入门 3

    for 循环前推断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"&g ...

  3. doT.js模板引擎及基础原理

    时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...

  4. doT.js模板和pagination分页应用

    doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...

  5. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  6. doT.js 模板引擎的使用

    dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...

  7. doT.js模板用法

    前提:引入doT.min.js: <script type="text/javascript" src="js/jquery.js"></sc ...

  8. dot.js模板实现分离式

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  9. 模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环···

    doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数 引入 javascript 文件: <script type=" ...

随机推荐

  1. Chapter 13 建造者模式

    建造者模式又叫生成器模式:将一个产品的内部表象与产品的生成过程分割开来,从而可以使一个建造过程生成具有不同的内部表象的产品对象. 代码: package xiao; import java.util. ...

  2. python模块 mysql-python安装（在ubuntu系统下）

    直接运行如下命令 sudo pip install MySQL-python 报如下错误 xxx@ubuntu:~$ sudo pip install MySQL-python Downloading ...

  3. Sqlite ContentProvider Loader 上下文 对话框

    一.整体工程图 二.activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/re ...

  4. 原生app与web app的比较

    http://www.2ee9.com/news/news_show_36_237.html http://zhidao.baidu.com/link?url=7lWq2tgqiMiDmsRd54hO ...

  5. 纯CSS3实现常见多种相册效果

    本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...

  6. FireMonkey下的异形窗体拖动（句柄转换）

    DelphiXE2 Firemoney FMX 的窗体不只是为windows的, 所以很多功能都没有了. 最常见的就是拖拽了 先看 VCL时代 一个经典拖动代码 ReleaseCapture(); S ...

  7. Android 使用SpannableString显示复合文本

    http://blog.csdn.net/feizhixuan46789/article/details/10334441 http://www.th7.cn/Program/Android/2014 ...

  8. ActivityGroup相关--getLocalActivityManager() 以及intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)用法

    ActivityGroup简介 1.ActivityGroup的核心就是继承了该类,能够通过getLocalActivityManager()得到一个LocalActivityManager 如,Lo ...

  9. 【C++】第二章：Hello World！

    1.开发工具:Microsoft Visual C++ v6.0 2.通过IDE建立Hello World程序: 我们可以看到三个文件夹结构,分别是: Source Files(源文件). Heade ...

  10. Cocos2d-x 3.2 大富翁游戏项目开发-第七部分 获取角色路径_3

    点击下载代码   http://download.csdn.net/detail/lideguo1979/8291803 新建一个类RouteNavigation,定义getPath()方法.用来获取 ...