doT js模板入门 2

来源：互联网发布：淘宝店铺岗位编辑：程序博客网时间：2024/05/22 01:51

doT js 使用{{}} 非常类似于JSP,所以用起来感觉很亲切,很顺手
{{–><%
}}–>%>
例如:

<div id="evaluationtmpl">    {{ for(var prop in it) { }}    <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>    {{ } }}</div>

是不是很像:

<div id="evaluationtmpl">    <% for(var prop in it) { %>    <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>    <% } %></div>

下面是一个二重循环的实例:

<!doctype html><html><head><meta charset="utf-8"><title>客户列表</title><link href="css/dealer.css" rel="stylesheet" type="text/css"><link href="css/tcal.css" rel="stylesheet" type="text/css"><script src="js/tcal.js" type="text/javascript"></script><script id="cuslist" type="text/x-dot-template">    <table border="1" >        {{ for(var prop in it){  }}            {{? typeof it[prop]['appName']=='object' }}                <tr  >                    <td rowspan="{{=it[prop]['appName'].length}}" >{{=it[prop]['cusName']}}</td>                    <td>{{=it[prop]['appName'][0]}}</td>                    <td>{{=it[prop]['appTime'][0]}}</td>                </tr>                {{ for(var prop2=1;prop2 <it[prop]['appName'].length; prop2++ ){ }}                    <tr>                        <td  >{{=it[prop]['appName'][prop2]}}</td>                        <td  >{{=it[prop]['appTime'][prop2]}}</td>                    </tr>                {{ } }}            {{?? }}                <tr>                    <td >{{=it[prop]['cusName']}}</td>                    <td >{{=it[prop]['appName']}}</td>                    <td  >{{=it[prop]['appTime']}}</td>                </tr>            {{?}}        {{ } }}    </tableb></script><script type="text/javascript" src="js/doT.min.js"></script></head><body>                <div id="table-list">               </div></body><script type="text/javascript">        var cusDate=[        {"cusName":"天X信息技术有限公司","appName":["好管家","朋友圈"],"appTime":["2015-07-12","2015-07-12"],"appPeop":["张三","李连清"]},        {"cusName":"天X信息公司","appName":["好管家","朋友圈"],"appTime":["2015-07-12","2015-07-23"],"appPeop":["张三","李连清"]},        {"cusName":"天X信息技公司","appName":"好管家","appTime":"2015-07-12","appPeop":"张青"},        {"cusName":"天X公司","appName":"好管家,a+","appTime":"2015-07-12","appPeop":"张青"},        ];        //tmpljson={"testmode":"<td class='tab-com'>{{=trValue.cusName}}</td><td class='tab-other'>{{=trValue.appName}}</td><td class='tab-other'>{{=trValue.appTime}}</td><td class='tab-name'>aaa{{=trValue.appPeop}}</td>"}//      console.log(document.getElementById("cuslist").innerHTML);        console.log('----------------------');        var cusHtml=doT.template(document.getElementById("cuslist").innerHTML);        document.getElementById('table-list').innerHTML=cusHtml(cusDate);        /*document.getElementById('table-list').innerHTML= doT.template(cusHtml,undefined)(cusDate);*/</script></html>

运行结果:

注意:
1,第二次循环的index是从1开始的,而不是从0开始;
2,doT JS的if判断有两种写法:
写法一:

<body><div id="conditionstmpl">    {{? !it.name }}    <div> 你还没有名字</div>    {{?? }}    <div>Oh, I love your name, {{=it.name}}!</div>    {{?}}</div><hr/><div id="condition"></div><script type="text/javascript">    var dataEncode = {"name": "黄威", "age": 31};    var interText = doT.template($("#conditionstmpl").html());    $("#condition").html(interText(dataEncode));</script></body>

写法二:

<body><div id="conditionstmpl">    {{ if(!it.name){ }}    <div> 你还没有名字</div>    {{ } else { }}    <div>Oh, I love your name, {{=it.name}}!</div>    {{ }  }}</div><hr/><div id="condition"></div><script type="text/javascript">    var dataEncode = {"name": "", "age": 31};    var interText = doT.template($("#conditionstmpl").html());    $("#condition").html(interText(dataEncode));</script></body>

参考:
doT js模板入门

1 0