可以在线测试:http://olado.github.io/doT/index.html
Github地址:https://github.com/olado/doT
文档:http://dotjs.cn/
文档:http://www.cnblogs.com/kuikui/p/3505768.html
说明:本插件不依赖其他插件。dot.js主要的用途就是,在模板上放进数据,生成含有数据的html代码。
1、it是传递进去的数据对象;
2、{{}} 里面就是javascript代码.
3、doT.template( template )( obj ) 是:把模板template和数据data,作为参数传入doT.template() 方法,生成包含数据的html代码
需要注意的是:不要多个空格什么的,比如这种语法是错误的:{{ =}}
需要把语句包含在里面。
Script标签外面有个盒子或者一个空盒子(#b)。
Js调用方式:
var tmpText = document.getElementById("ex4").innerHTML;var data={"name":"jon",age":"50"};
document.getElementById("b").innerHTML=doT.template(tmpText )(data);
一个完整示例:
<table id="content4">
<script type="text/template" charset="utf-8" id="ex4">
<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
{{if(it.length>0 ){ }}
{{for(var i=0;i< it.length;i++) { }}
<tr><td>{{=it[i].name }}</td><td>{{=it[i].age }}</td><td>{{=it[i].sex||'' }}</td></tr>
{{ } }}
{{ }else{ }}
<tr>没有数据</tr>
{{ } }}
</script>
</table>
<script>
var text4=document.getElementById("ex4").innerHTML;
var data4=[{"name":"jon","age":"23","sex":"男"},{"name":"aaa","age":"50"}];
document.getElementById("content4").innerHTML=doT.template(text4)(data4);
</script>