doT js模板入门 2

doT js 使用{{}} 非常类似于JSP,所以用起来感觉很亲切,很顺手
{{–><%
}}–>%>
例如:

<div id="evaluationtmpl">
    {{ for(var prop in it) { }}
    <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
    {{ } }}
</div>

是不是很像:

<div id="evaluationtmpl">
    <% for(var prop in it) { %>
    <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
    <% } %>
</div>

下面是一个二重循环的实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>客户列表</title>
<link href="css/dealer.css" rel="stylesheet" type="text/css">
<link href="css/tcal.css" rel="stylesheet" type="text/css">
<script src="js/tcal.js" type="text/javascript"></script>

<script id="cuslist" type="text/x-dot-template">
    <table border="1" >
        {{ for(var prop in it){  }}

            {{? typeof it[prop]['appName']=='object' }}
                <tr  >
                    <td rowspan="{{=it[prop]['appName'].length}}" >{{=it[prop]['cusName']}}</td>
                    <td>{{=it[prop]['appName'][0]}}</td>
                    <td>{{=it[prop]['appTime'][0]}}</td>
                </tr>
                {{ for(var prop2=1;prop2 <it[prop]['appName'].length; prop2++ ){ }}
                    <tr>
                        <td  >{{=it[prop]['appName'][prop2]}}</td>
                        <td  >{{=it[prop]['appTime'][prop2]}}</td>
                    </tr>
                {{ } }}
            {{?? }}
                <tr>
                    <td >{{=it[prop]['cusName']}}</td>
                    <td >{{=it[prop]['appName']}}</td>
                    <td  >{{=it[prop]['appTime']}}</td>
                </tr>
            {{?}}

        {{ } }}
    </tableb>
</script>

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

</head>

<body>

                <div id="table-list">
               </div>

</body>

<script type="text/javascript">

        var cusDate=[
        {"cusName":"天X信息技术有限公司","appName":["好管家","朋友圈"],"appTime":["2015-07-12","2015-07-12"],"appPeop":["张三","李连清"]},
        {"cusName":"天X信息公司","appName":["好管家","朋友圈"],"appTime":["2015-07-12","2015-07-23"],"appPeop":["张三","李连清"]},
        {"cusName":"天X信息技公司","appName":"好管家","appTime":"2015-07-12","appPeop":"张青"},
        {"cusName":"天X公司","appName":"好管家,a+","appTime":"2015-07-12","appPeop":"张青"},
        ];
        //tmpljson={"testmode":"<td class='tab-com'>{{=trValue.cusName}}</td><td class='tab-other'>{{=trValue.appName}}</td><td class='tab-other'>{{=trValue.appTime}}</td><td class='tab-name'>aaa{{=trValue.appPeop}}</td>"}
//      console.log(document.getElementById("cuslist").innerHTML);
        console.log('----------------------');
        var cusHtml=doT.template(document.getElementById("cuslist").innerHTML);
        document.getElementById('table-list').innerHTML=cusHtml(cusDate);
        /*document.getElementById('table-list').innerHTML= doT.template(cusHtml,undefined)(cusDate);*/

</script>

</html>

运行结果:

注意:
1,第二次循环的index是从1开始的,而不是从0开始;
2,doT JS的if判断有两种写法:
写法一:

<body>
<div id="conditionstmpl">
    {{? !it.name }}
    <div> 你还没有名字</div>
    {{?? }}
    <div>Oh, I love your name, {{=it.name}}!</div>
    {{?}}
</div>
<hr/>
<div id="condition"></div>
<script type="text/javascript">
    var dataEncode = {"name": "黄威", "age": 31};
    var interText = doT.template($("#conditionstmpl").html());
    $("#condition").html(interText(dataEncode));
</script>
</body>

写法二:

<body>
<div id="conditionstmpl">
    {{ if(!it.name){ }}
    <div> 你还没有名字</div>
    {{ } else { }}
    <div>Oh, I love your name, {{=it.name}}!</div>
    {{ }  }}
</div>
<hr/>
<div id="condition"></div>
<script type="text/javascript">
    var dataEncode = {"name": "", "age": 31};
    var interText = doT.template($("#conditionstmpl").html());
    $("#condition").html(interText(dataEncode));
</script>
</body>

参考:
doT js模板入门