Dot模板的使用小结2 

 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

 

posted @ 2015-10-26 13:50  挥刀  阅读(624)  评论(0)  编辑  收藏  举报