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部分：

<!-- 循环 -->
<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部分：

// 循环
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部分

<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部分

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

渲染出：

DIV 部分

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

JS 部分

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);

渲染结果：