doT jsテンプレート入門2
doT jsでは{{}}がJSPに非常に似ているので、使い心地が親切で、使い勝手がいい{{－><%}－>%>例えば:
似ているのではないでしょうか.
次に、二重ループの例を示します.
実行結果:注意:1、2回目のループのindexは0からではなく1から始まります.2,doT JSのif判断には2つの書き方がある:書き方1:
書き方2:
参考:doT jsテンプレート入門
<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、2回目のループのindexは0からではなく1から始まります.2,doT JSのif判断には2つの書き方がある:書き方1:
<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>書き方2:
<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テンプレート入門