doT js模板入门 2
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模板入门
