Dot模板的使用小结2
2024-10-19 06:23:35
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dot模板总结</title>
</head>
<body>
<div id="div1"> </div>
<!--安装dot模板-->
<script src="dot.js"></script> <!--dot的javascript模板-->
<script id="j-tmpl" type="text/template">
{{ if(it.success){ }}
<h2>results:</h2>
<ul>
{{ for (var i = 0, l = it.data.length; i < l; i++) { }}
<li>
<h5>{{=it.data[i].title}}</h5>
<p>{{=it.data[i].message}}</p>
</li>
{{ } }}
<ul>
{{ }else{ }}
<h2>暂无数据</h2>
{{ } }}
</script> <!--1.获取数据,2.填充数据到模板,3.将填充数据后的模板填充的html代码指定位置-->
<script>
//伪造数据
var obj = {
success: true,
data:[
{title:'item1',message:11},
{title:'item2',message:22}
]
}
//初始化模板
var tmpl = document.getElementById('j-tmpl').innerHTML;
var doTtmpl = doT.template(tmpl);
//模板填充数据
var data = doTtmpl(obj );
//模板填充到指定位置
var dd = document.getElementById("div1");
dd.innerHTML = data;
</script>
</body>
</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
最新文章
- DM 多路径存储
- PHP获取当前域名$_SERVER[&#39;HTTP_HOST&#39;]和$_SERVER[&#39;SERVER_NAME&#39;]的区别
- 机器学习利器——Scikit-learn的安装
- Unity3d删除无用的美术资源
- STM32的串口
- [转]rpcndr.h和wtypes.h冲突Bug的解决方案
- python参考手册--第1章python简介
- FZU 2125 简单的等式
- Introducing RecyclerView(二)
- PreTranslateMessage和TranslateMessage区别
- Spring学习(8)--- @Autowired注解(一)
- Vue(day6)
- synchronized学习
- H2 Database Engine
- N!中末尾有多少个0
- PHP7 学习笔记(十四)Reids 键空间通知配合TP5 实现分布式延时任务
- sublime text配置make工具
- SVN回滚至某个版本
- <;a>;标签实现链接和锚点的区别
- python的30个编程技巧