doT.js是一个轻量简单的模板输出js. 下面介绍一下它的基本用法。
1.输出 基本输出：{{= }} 原样输出：{{! }}
<div id="info"></div> ?<script id="dot-template" type="text/x-dot-template"> ? <p>name:{{=it.name}}</p> ? <p>age:{{=it.age}}</p> ? <p>{{=it.html}}</p> ? <p>{{!it.html}}</p> ?</script> ?<script type="text/javascript"> ? var dataJSON = {"name": "AlanJ", "age": "20", "html": "<div style=‘background: #f00; height: 30px; line-height: 30px;‘>html元素</div>"}; ? var html = doT.template(document.getElementById("dot-template").text)(dataJSON); ? document.getElementById("info").innerHTML = html; ?</script>2.判断 if:{{? }} else if:{{??}}
<div id="info"></div> ?<script id="dot-template" type="text/x-dot-template"> ? <p>name:{{=it.name}}</p> ? <p>score:{{=it.score}}</p> ? {{? it.score < 60}} ? <p>不及格</p> ? {{?? it.score < 80}} ? <p>及格</p> ? {{??}} ? <p>优秀</p> ? {{?}} ?</script> ?<script type="text/javascript"> ? var dataJSON = {"name": "AlanJ", "score": "100"}; ? var html = doT.template(document.getElementById("dot-template").text)(dataJSON); ? document.getElementById("info").innerHTML = html; ?</script>3.循环 for each {{~it :item:index}} {{~}} for in: {{for (var index in it){ }} {{ } }}
-------------------------------------for each---------------------------------------------- ?<ul id="info1"></ul> ?-------------------------------------for in---------------------------------------------- ?<ul id="info2"></ul> ?<script id="dot-template1" type="text/x-dot-template"> ? {{~it :item:index}} ? <li> ? <p>index:{{=index + 1}}</p> ? <p>name:{{=item.name}}</p> ?<p>age:{{=item.age}}</p> ? </li> ? {{~}} ?</script> ?<script id="dot-template2" type="text/x-dot-template"> ? {{for (var index in it){ }} ? <li> ?<p>index:{{=index + 1}}</p> ?<p>name:{{=it[index].name}}</p> ?<p>name:{{=it[index].age}}</p> ? </li> ? {{}}} ?</script> ?<script type="text/javascript"> ? var dataJSONArray = [{"name": "AlanJ", "age": "20"}, {"name": "Jack", "age": "40"}, {"name": "ClearLove", "age": "60"}]; ? var html1 = doT.template(document.getElementById("dot-template1").text)(dataJSONArray); ? document.getElementById("info1").innerHTML = html1; ? var html2 = doT.template(document.getElementById("dot-template2").text)(dataJSONArray); ? document.getElementById("info2").innerHTML = html2; ?</script> ?4.partials (个人理解：部分拼接 ) 全：{{##def.snippet:{{#def.joke}}#}}{{#def.snippet}} 简：{{#def.joke}}
<div id="info"></div> ?<script id="dot-template" type="text/x-dot-template"> ?<div>{{=it.name}}</div> ? {{##def.snippet: ? {{#def.joke}} ? #}} ? {{#def.snippet}} ?
{{#def.joke}} ?</script> ?<script type="text/javascript"> ? var dataJSON ={"name":"AlanJ"}; ? var defPart = {"joke":"<div>{{=it.name}} who?</div>"}; ? var html = doT.template(document.getElementById("dot-template").text, null, defPart)(dataJSON); ? document.getElementById("info").innerHTML = html; ?</script>出处：https://0qingfeideyi0.iteye.com/blog/2274741
参考文档：http://olado.github.io/doT/
源代码：https://github.com/olado/doT
dot.js简单入门
原文地址：https://www.cnblogs.com/aten/p/9572130.html