doT.js简单入门

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" src="../../doT.js"></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" src="../../doT.js"></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" src="../../doT.js"></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" src="../../doT.js"></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>

结果：

扫描二维码关注公众号，回复： 514154 查看本文章

总结：

doT.js用法还是比较简单的，工作中多用于分页，特别是后台常bootstrap结合使用。

参考文档：http://olado.github.io/doT/

源代码：https://github.com/olado/doT

文中demo请查看doT.zip.

猜你喜欢