doT js模板入门 2

78 阅读 0 评论 52 点赞

我是靠谱客的博主现实黄豆，最近开发中收集的这篇文章主要介绍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>