javascript 模板引擎-artTemplate使用 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>art</title>
  5 </head>
  6 <script type="text/javascript" src="template-web.js"></script>
  7 <body>
  8 <div id="content"></div>
  9 <script id="table" type="text/html">
 10     <table border="1" cellspacing="0" cellpadding="0">
 11         <!-- value是值 i是索引 -->
 12         {{each datas value i}}
 13             <tr>
 14                 <td width="40%">{{types[value.type]}}</td>
 15                 <td>
 16                     <!--循环嵌套 val是值 j是索引 -->
 17                     {{each attrs val j}}
 18                         <!-- 条件判断 -->
 19                         {{if value[val.code]}}
 20                             <span>{{val.name}}：</span><span class="projectColor termInfoSpan"  unit="">{{value[val.code]}}</span></br>
 21                         {{/if}}
 22                     {{/each}}
 23                 </td>
 24             </tr>
 25         {{/each}}
 26     </table>
 27 
 28 </script>
 29 
 30 <script type="text/javascript">
 31 
 32 // 模拟后台返回数据
 33 var datas = [{
 34     orderNum: "0",
 35     type: "1",
 36     version: "version1",
 37     mac: "mac"
 38 }, {
 39     orderNum: "1",
 40     type: "2",
 41     version: "version2"
 42 }, {
 43     orderNum: "2",
 44     type: "3",
 45     version: "version3"
 46 }, {
 47     orderNum: "3",
 48     type: "4",
 49     version: "version4",
 50     cellAH: "9000",
 51     cellNum: "10"
 52 }, {
 53     orderNum: "4",
 54     type: "5",
 55     version: "version5"
 56 }, {
 57     orderNum: "5",
 58     type: "6",
 59     version: "version6"
 60 }, {
 61     orderNum: "6",
 62     type: "7",
 63     version: "version7"
 64 }, {
 65     orderNum: "7",
 66     type: "8",
 67     version: "version8"
 68 }, {
 69     orderNum: "8",
 70     type: "9",
 71     version: "version9"
 72 }, {
 73     orderNum: "9",
 74     type: "10",
 75     version: "version10"
 76 }, {
 77     orderNum: "10",
 78     type: "11",
 79     version: "version11"
 80 }];
 81 // 所有可能出现的属性
 82 var attrs = [
 83     {name:"Attr1",code:"mac"},
 84     {name:"Attr2",code:"version"},
 85     {name:"Attr3",code:"cellAH"},
 86     {name:"Attr4",code:"cellNum"}
 87 ];
 88 // type值对应的设备类型
 89 var types = {
 90     "1":"type1",
 91     "2":"type2",
 92     "3":"type3",
 93     "4":"type4",
 94     "5":"type5",
 95     "6":"type6",
 96     "7":"type7",
 97     "8":"type8",
 98     "9":"type9",
 99     "10":"type10",
100     "11":"type11"
101 }
102 var data = {
103     datas:datas,
104     attrs:attrs,
105     types:types
106 }
107 
108 var html = template('table', data);
109 document.getElementById('content').innerHTML = html;
110 </script>
111 </body>
112 </html>

 

posted @ 2018-01-10 16:36  veryvalley  阅读(192)  评论(0)    收藏  举报