1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Dot模板总结</title> 6 </head> 7 <body> 8 <div id="div1"> 9 10 </div> 11 <!--安装dot模板--> 12 <script src="dot.js"></script> 13 14 15 <!--dot的javascript模板--> 16 <script id="j-tmpl" type="text/template"> 17 {{ if(it.success){ }} 18 <h2>results:</h2> 19 <ul> 20 {{ for (var i = 0, l = it.data.length; i < l; i++) { }} 21 <li> 22 <h5>{{=it.data[i].title}}</h5> 23 <p>{{=it.data[i].message}}</p> 24 </li> 25 {{ } }} 26 <ul> 27 {{ }else{ }} 28 <h2>暂无数据</h2> 29 {{ } }} 30 </script> 31 32 <!--1.获取数据,2.填充数据到模板，3.将填充数据后的模板填充的html代码指定位置--> 33 <script> 34 //伪造数据 35 var obj = { 36 success: true, 37 data:[ 38 {title:'item1',message:11}, 39 {title:'item2',message:22} 40 ] 41 } 42 //初始化模板 43 var tmpl = document.getElementById('j-tmpl').innerHTML; 44 var doTtmpl = doT.template(tmpl); 45 //模板填充数据 46 var data = doTtmpl(obj ); 47 //模板填充到指定位置 48 var dd = document.getElementById("div1"); 49 dd.innerHTML = data; 50 </script> 51 </body> 52 </html>
相关博文：http://www.fantxi.com/blog/archives/dot-template/
http://www.cnblogs.com/kuikui/p/3505768.html
dot文档：http://olado.github.io/doT/index.html