doT js模板入門 2
阿新 • • 發佈：2018-03-28
管家 click 而不是 date .cn appname rowspan time -c
doT js 使用{{}} 非常相似於JSP,所以用起來感覺非常親切,非常順手
{{–><%
}}–>%>
比如:
<div id="evaluationtmpl">
{{ for(var prop in it) { }}
<div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
{{ } }}
</div>是不是非常像:
<div id 以下是一個二重循環的實例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>客戶列表</title>
<link href="css/dealer.css" 執行結果:
註意:
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