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
时间： 2024-11-06 00:05:14