???????????????????????????
??????????? ???????????????????????
??????????????????????????????????????????????? ???????????????????????????????????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模板入门
doT js模板入门 2
原文地址：https://www.cnblogs.com/llguanli/p/8665196.html