doT JS

1doT.js github地址:

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

实例1:简单

Html代码  

  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>  

运行结果:

 实例二:条件判断

Html代码  

  1. <body>  
  2. <div id="conditionstmpl">  
  3.     {{? !it.name }}  
  4.     <div> 你还没有名字</div>  
  5.     {{?? }}  
  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>  

运行结果:

 

实例三:循环+条件判断

Html代码  

  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.         {{?? }}  
  10.             <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>  
  11.         {{?}}  
  12.   
  13.     {{ } }}  
  14. </div>  
  15. <hr/>  
  16. <div id="evaluation"></div>  
  17. <script type="text/javascript">  
  18.     var dataEval = {  
  19.         "name": "Jake",  
  20.         "age": 31,  
  21.         "interests": ["basketball", "hockey", "photography"],  
  22.         "contact": {"email": "jake@xyz.com", "phone": "999999999"}  
  23.     };  
  24.     var evalText = doT.template($("#evaluationtmpl").html());  
  25.     $("#evaluation").html(evalText(dataEval));  
  26. </script>  
  27. </body>  

 运行结果:

 

源码下载地址:

http://pan.baidu.com/s/1c0HFyb2

说明:1,{{? typeof it[prop]=='object' }} 表示条件判断,结束标签是{{?}}2, {{?? }}是条件判断的else3,{{ 和{{? 中均可以使用原生的js语法,如for,typeof 等4,模板并不是一定要放在script标签中,也可以放在隐藏的div标签中

 

CSDN博客主页 
itEye博客主页

时间： 2024-10-28 08:26:05

doT JS的相关文章

doT js 常见错误

doT 模板一般是放在script脚本里面的,例如: Html代码   <!DOCTYPE html>   <html lang="en">   <head>       <meta charset="UTF-8">       <title></title>       <script type="text/javascript" src="../../do

doT js 宏的使用

doT js 宏的使用 Html代码   <script id="serviceItemTemplate" type="text/x-dot-template">           {{##def.spaceUnit:           {{? it.policyInfo.storageUnit==1 }}K{{?? it.policyInfo.storageUnit==2}}M{{?? it.policyInfo.storageUnit==3}}G

doT js模板入门 3

for 循环前判断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"> {{? it.invoiceInfoDtos}} {{ for(var prop=0;prop <it.invoiceInfoDtos.length ; prop++){ }} <div class="{{ if(prop==0){}}invoice-infor {{ }else

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"></scr

doT js模板入门 2

doT js 使用{{}} 非常类似于JSP,所以用起来感觉很亲切,很顺手 {{–><% }}–>%> 例如: <div id="evaluationtmpl"> {{ for(var prop in it) { }} <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div> {{ } }} </div> 是不是很像: <div id="evaluatio

IE8 jquery ajax获取静态资源报错TypeError 拒绝访问

1,出现问题的代码: Js代码   /***      * 请求静态html 模板      * @param url      * @param $jqueryDiv : 四个主要div之一      * @param templateHandle : 自定义,用于使用Dot js模板函数      * @param callback : 用于实现模板之后,绑定事件      * @param templateData : cia的返回数据      */      ajaxHtml: fun

网页前端设计资源:前端设计资源收藏夹

文章简介:今天在邮件中收到一个由 Dimi Navrotskyy在Github上发布的前端收藏夹,里面的资源太丰富了.我在想很多同学肯定喜欢.本想直接发个链接与大家分享,但时间久了,找起来辛苦.特意copy了一份发在w3cplus上. 今天在邮件中收到一个由 Dimi Navrotskyy在Github上发布的前端收藏夹,里面的资源太丰富了.我在想很多同学肯定喜欢.本想直接发个链接与大家分享,但时间久了,找起来辛苦.特意copy了一份发在w3cplus上.而且我在后面还增加了一份我自己整理的学习

常用的JavaScript模板引擎介绍

这篇文章主要介绍了常用的JavaScript模板引擎介绍,本文介绍了8款常用JavaScript 模板引擎,着重讲解了artTemplate模板引擎,需要的朋友可以参考下     最近工作内容慢慢接近我的理想化(web前端),所以关注比较多的是前端性能!后台同事介绍使用ajax模板引擎,提高渲染速度! 下面介绍几款 JavaScript 模板引擎 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简

部分保留&quot;.cn和.中国&quot;域名开放注册

关于部分保留域名开放注册的抢滩期公告 0827.cn0827.中国 1.中国 1234.cn 1234.中国 148.cn 148.中国 148legal.cn 148legal.中国148server.cn 148server.中国 1630.cn 1630.中国 16congress.cn 16congress.中国 184.cn184.中国 1world1dream.ac .cn 1world- 1dream.ac.cn 1-world-1-dream.ac.cn 1world1dream