Dot模板的使用小结2

最新推荐文章于 2023-09-27 10:39:29 发布

weixin_34067049

最新推荐文章于 2023-09-27 10:39:29 发布

阅读量245

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/suoking/p/4910991.html

版权

 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

转载于:https://www.cnblogs.com/suoking/p/4910991.html

weixin_34067049

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫