doT.js 模板引擎

150 阅读 0 评论 99 点赞

我是靠谱客的博主坚强小兔子，这篇文章主要介绍doT.js 模板引擎，现在分享给大家，希望可以做个参考。

doT.js特点是快，小，无依赖其他插件。

官网：
http://olado.github.io

使用方法：
{{= }} for interpolation —–赋值
{{ }} for evaluation —–循环
{{~ }} for array iteration —–数组
{{? }} for conditionals —–条件
{{! }} for interpolation with encoding
{{# }} for compile-time evaluation/includes and partials
{{## #}} for compile-time defines

调用方式：
var tmpText = doT.template(模板);
tmpText(数据源);

下面请欣赏小例旬的颜值…

div部分：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!-- 循环 -->
<ul id="forDo">
<script type="text/template" charset="utf-8" id='demo_1'>
{{if( it && it.length>0 ){}}
{{for(var i=0;i<it.length;i++){}}
<li>{{=it[i].name}}</li>
{{ } }}
{{ }else{ }}
<li>没有数据</li>
{{ } }}
</script>
</ul>
<!-- 取值 -->
<div id="interpolationtmpl_1">
<script id="interpolationtmpl" type="text/x-dot-template">
<div>Hi {{=it.name}} !</div>
<div>{{=it.gender || ''}}</div>
</script>
</div>
<br/>
<!-- 判断
格式：
{{? }} if
{{?? }} else if
{{??}} else
-->
<div id='conditionstmpl_1'>
<script id="conditionstmpl" type="text/x-dot-template">
{{? !it.name }}
<div>哇,兵长太帅受不了，我的 {{=it.name}}!</div>
{{?? !it.height === 0}}
<div>进击的巨人第二季你看了嘛!</div>
{{??}}
虽然你的身高只有{{=it.height}} 但是不耽误你的帅气，兵长兵长~~
{{?}}
</script>
</div>

JS部分：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
// 循环
var _demo=document.getElementById('demo_1').innerHTML;
var obj=[{name:'乔巴'},{name:'罗'},{name:'女帝'}];
document.getElementById('forDo').innerHTML= doT.template(_demo)(obj);
// 取值
var dataInter = {"name":"污力穷小可矮","gender":'色女'};
var interText = document.getElementById('interpolationtmpl').innerHTML;
document.getElementById('interpolationtmpl_1').innerHTML= doT.template(interText)(dataInter);
//判断
var EncodeText =document.getElementById('conditionstmpl').innerHTML;
var dataEncode = {"name":"利威尔","height":'160cm'};
document.getElementById('conditionstmpl_1').innerHTML= doT.template(EncodeText)(dataEncode);

数组

div部分

复制代码

1
2
3
4
5
6
7
8
<div id="arraystmpl_1">
<script id="arraystmpl" type="text/x-dot-template">
{{~it.array:value:index}}
<div>{{=index+1}}{{=value}}</div>
{{~}}
（不要忘记这个小尾巴）
</script>
</div>

上面的html大家可以试着调换一下value、index的位置，看刊数值显示的位置。

JS部分

复制代码

1
2
3
4
//数组
var arrText = document.getElementById('arraystmpl').innerHTML;
var dataArr = {"array":["红豆","大红豆","芋头"]};
document.getElementById('arraystmpl_1').innerHTML=doT.template(arrText)(dataArr);

渲染出：
这里写图片描述

DIV 部分

复制代码

1
2
3
4
5
6
<!-- 没有准确用词1 -->
<div id="encodetmpl_1">
<script id="encodetmpl" type="text/x-dot-template">
Visit {{!it.uri}} {{=it.html}}
</script>
</div>

JS 部分

复制代码

1
2
3
4
var EncodeText =
document.getElementById('encodetmpl').innerHTML;
var dataEncode = {"uri":"https://github.com/olado/doT","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
document.getElementById('encodetmpl_1').innerHTML=doT.template(EncodeText)(dataEncode);