Home > Developer > Web Develop
DoT JS uses {{}} very similar to JSP, so it feels very nice to use, very handy.
{{–><%
}}–>%>
For example:
<div id="evaluationtmpl"> {{ for(var prop in it) { }} <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div> {{ } }}</div>
Does it look like:
<div id="evaluationtmpl"> <% for(var prop in it) { %> <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div> <% } %></div>
Here is an example of a double loop:
<!doctype html><html><head><meta charset="Utf-8"><title>Customer List</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"> varcusdate=[{"Cusname":"Tian X Information Technology Co., Ltd.","AppName":["Good Housekeeping","Circle of Friends"],"Apptime":["2015-07-12","2015-07-12"],"Apppeop":["Zhang San","Li Lianqing"]}, {"Cusname":"Tian X information Company","AppName":["Good Housekeeping","Circle of Friends"],"Apptime":["2015-07-12","2015-07-23"],"Apppeop":["Zhang San","Li Lianqing"]}, {"Cusname":"Tian X Information technology company","AppName":"Good Housekeeping","Apptime":"2015-07-12","Apppeop":"Zhang Qing"}, {"Cusname":"Day x Company","AppName":"Good Housekeeping, A +","Apptime":"2015-07-12","Apppeop":"Zhang Qing"}, ];//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> Operation Result:
Attention:
1, the index of the second cycle begins at 1, not from 0;
The If judgment of 2,dot JS has two kinds of wording:
Writing one:
<body><div id="Conditionstmpl"> {{? ! It.name }} <div> you haven't got a name </div> {{?? }} <div>Oh, I love your name, {{=it.name}}! </div> {{?}}</div><hr/><div id="condition"></div><script type="Text/javascript"> var dataencode = {"name": "Good", "Age": -}; var intertext = Dot.template ($ ("#conditionstmpl"). html ()); $ ("#condition"). HTML (Intertext (Dataencode)); </script></body>Two:
<body><div id="Conditionstmpl"> {{ if(! It.name) {}} <div> you haven't got a name </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": -}; var intertext = Dot.template ($ ("#conditionstmpl"). html ()); $ ("#condition"). HTML (Intertext (Dataencode)); </script></body>Reference:
DoT JS Template Primer
DoT JS Template Primer 2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
