doT.js插件的使用

可以在线测试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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值