doT.js学习doT.js特点是快，小，无依赖其他插件。但是一般和jquery一起使用官网： http://olad

doT.js特点是快，小，无依赖其他插件。但是一般和jquery一起使用

**使用方法： **

{{= }} 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(数据源);

案例一：

1、引入js

<script type="text/javascript" src="js/doT.min.js" ></script>  
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>

2、创建模板

<script id="temp" type="template">
 {{for(var i=0;i<it.length;i++ ){}}  
    <li>{{=it[i]}}</li>  
    {{}}}  
</script>

3、使用模板替代原内容

<script type="text/javascript">  
   $(function(){  
   var data=['z','x','l','nice'];  
   var interText = doT.template($("#temp").text());  
  $("#ulList").html(interText(data));  
  })  
</script>

4、html

<ul id="ulList">  
   <li>1</li>  
   <li>2</li>  
   <li>3</li>  
</ul>

5、也可以使用按钮调用js方法替代原内容

6、完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>first doT</title>
        <script type="text/javascript" src="js/doT.min.js" ></script>
        <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
        <script id="temp" type="template">
            {{for(var i=0;i<it.length;i++ ){}}
            <li>{{=it[i]}}</li>
            {{}}}
        </script>
       
    </head>
    <body>
        <ul id="ulList">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
         <script type="text/javascript">
            $(function(){
            var data=['z','x','l','nice'];
             var interText = doT.template($("#temp").text());
            $("#ulList").html(interText(data));
            })
            
        </script>
    </body>
</html>

案例二： 2、for array iteration 数组
格式：

{{~data.array :value:index }}  
...  
{{~}}

数据源:{"array":["banana","apple","orange"]}

区域：<div id="arrays"></div>

模板：

<script id="arraystmpl" type="text/x-dot-template">  
{{~it.array:value:index}}  
<div>{{= index+1 }}{{= value }}!</div>  
{{~}}  
</script>

调用方式：

var dataArr = {"array":["banana","apple","orange"]};  
var arrText = doT.template($("#arraystmpl").text());  
$("#arrays").html(arrText(dataArr));

例子三：

3、{{? }} for conditionals 条件
格式：
{{? }} if {{?? }} else if {{??}} else

数据源：{"name":"Jake","age":31}

区域：<div id="condition"></div>

模板：

<script id="conditionstmpl" type="text/x-dot-template">  
{{? !it.name }}  
<div>Oh, I love your name, {{=it.name}}!</div>  
{{?? !it.age === 0}}  
<div>Guess nobody named you yet!</div>  
{{??}}  
You are {{=it.age}} and still dont have a name?

{{?}}  
</script>

调用方式：

var dataEncode = {"uri":"http://bebedo.com/?keywords=Yoga","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};  
var EncodeText = doT.template($("#encodetmpl").text());  
$("#encode").html(EncodeText(dataEncode));