artTemplate-3.0（與項目實際結合）

引入artTemplate.js

 1 <script type="text/javascript" src="${ctx}/assets/plugins/artTemplate/3.0.1/template.js"></script> 

方法

 1.template(id, data)

文檔示例：

1 <div id="content"></div>
2 <script id="test" type="text/html">
3 <h1>{{title}}</h1>
4 <ul>
5  {{each list as value i}} 6         <li>狗子{{i + 1}} ：{{value}}</li>   //value是list中的數據。
7     {{/each}}
8 </ul>
9 </script>

1 var data = { 2     title: '寶寶喜歡的狗種類', 3     list: ['拉布拉多', '薩摩耶', '塞羅納', '邊牧', '京巴', '牛頭梗', '鬆獅'] 4 }; 5 var html = template('test', data); 6 document.getElementById('content').innerHTML = html;

顯示結果：

<div id="content">
<h1>寶寶喜歡的狗種類</h1>
<ul>
     <li>狗子1：拉布拉多</li>
     <li>狗子2：薩摩耶</li>
     <li>狗子3：塞羅納</li>
     <li>狗子4：邊牧</li>
     <li>狗子5：京巴</li>
     <li>狗子6：牛頭梗</li>
     <li>狗子7：鬆獅</li>
</ul>
</div>

項目實際一：

根據id，將data渲染至模板。若是沒有 data 參數，那麼將返回一渲染函數。

建立模版，並使用ajax請求公共組件app-jquery-http.js請求數據渲染至模版。

（1）建立模版：

 1 <div id="banner">                                                        
 2     <ul id="bannerList">                
 3 
 4     </ul>                                               
 5 <script type="text/html" id="bannerListTmp">         //先經過（2）請求到數據，才能加載數據到模版。
 6  {{each sub as value i }} // 等價於：for(var i in sub) ，由（2）可知sub是數組  7         <li><img src="{{value.imgPath}}" /></li>     // {{}}
 8         {{/each}}
 9 </script>
10 </div>

（2）請求數據渲染模版。

原生js方式。

 1 $.ajax({  2      type :"GET",  3      async : false,  4      url : ../bbs/topic/list,
 5      data : {isBanner:true,pageSize:5},  6      dataType : "json",  7      success:function(list){  8           $("#bannerList").html(template("bannerListTmp",{sub:list}));
  9  }, 10      error : function(XMLHttpRequest, textStatus, errorThrown) { 11           var info = "XMLHttpRequest:" + JSON.stringify(XMLHttpRequest)+ " ;textStatus:" + textStatus + "; errorThrown:"+ JSON.stringify(errorThrown) + ";【" + url + "】"; 12  console.log(info); 13  14 });

使用app-jquery-http.js 方式。

 1  $.HTTP.list({ //type:"GET"  2         url : "../bbs/topic/list",  3  ajaxData : { //GET請求 將數據附加在url後，附加後的url爲：http://127.0.0.1:8080/geekbar/bbs/topic/list?isBanner=true&pageSize=5  4             isBanner : true,  //在連接後拼接形如：?a=1&b=2,不影響連接自己。  5             pageSize : 5
 6  },  7  ajaxOption : {  8             async : false //同步請求：鎖住瀏覽器，必須等到該請求結束後才能進行其餘操做。
 9  }, 10         success : function(list) { //list爲一個json數組:[object,object,...,object] 11             $("#bannerList").html(template("bannerListTmp", {sub : list})); //template(id,data); 14  } 15     });

 請求到的list以下：

項目實際二：

1.建立模版：

 1 <form action="" id="infoDetail">
 2 </form>
 3 <script type="text/html" id="infoDetailTmp">
 4    <img src="{{imgPath}}" />
 5    <label>姓名</label>
 6    <input type="text"  readonly value="{{nickname}}" />
 7    <label>性別</label>
 8    <input type="text" value="{{if sex==0}}男{{else}}女{{/if}}" readonly />
 9    <label>手機號</label> 
10    <input type="text" readonly value="{{telephone}}" />
11    <label>我的標籤</label> 
12    <input type="text" readonly  value="{{tag}}" />
13 </script>

2.渲染數據：

 1 <script>
 2      var userInfo = {};  3  $.HTTP.obj({  //type:post  4          url : "../rest/user/detailInfo",  5          success : function(json)(){ //json數據以下圖所示  6          userInfo = json.data;  7          var html = template('infoDetailTmp', userInfo);  8          document.getElementById("infoDetail").innerHTML = html;  9  } 10  }); 11 </script>

 2.template helper(name, callback)

學渣表示到如今沒看懂文檔裏時間格式器的例子   = =||| 

項目實際一：

1 <span>{{value.state | getOrderState}}</span>  // value.state就是請求到的數據中的list數組中每個對象的state數據。

 1  $.HTTP.list({  2  url : "rest/order/mylist.json",  3  ajaxData : {  4  pageNo : pageNo,  5  pageSize : 5,  6  search : searchInput.val(),  7  state : state  8  },  9  success : function(list, pInfo) { //該請求能夠得到兩個參數：list和pageInfo 10  var d = template("myOrderTmp", { 11  sub : list  //each sub as value i 12  }); 13  $("#myOrderList").append(d); 14  pageInfo = pInfo; 15  } 16  });

 1 template.helper("getOrderState", function(state) { //該state能夠任意命名，可是必須與後面的保持一致，這個數據是value.state得來的。  2     if(state == -2) { //均爲state的數據  3         return "已取消";  4  }  5     if(state == -1) {  6         return "待下單";  7  }  8     if(state == 0) {  9         return "已寄出"; 10  } 11     if(state == 3) { 12         return "已檢測"; 13  } 14     if(state == 4) { 15         return "維修中"; 16  } 17     if(state == 5) { 18         return "待付款"; 19  } 20     if(state == 6) { 21         return "待寄回"; 22  } 23     if(state == 7) { 24         return "待簽收"; 25  } 26     if(state == 8) { 27         return "訂單完成"; 28  } 29     if(state == 1) { 30         return "正在檢測"; 31  } 32 });

使用switch...case

 1 template.helper("getOrderState", function(state) { //該state能夠任意命名，可是必須知道它表示的是 value.state,value的值又是請求獲得數據中的list數組中的數據。  2     switch(state){  3         case -2:  4           return "已取消";  5           break;  6         case -1:  7           return "待下單";  8           break;  9         case 0: 10           return "已寄出"; 11           break; 12         case 3: 13           return "已檢測"; 14           break; 15         case 4: 16           return "維修中"; 17           break; 18         case 5: 19           return "待付款"; 20           break; 21         case 6: 22           return "待寄回"; 23           break; 24         case 7: 25           return "待簽收"; 26           break; 27         case 8: 28           return "訂單完成"; 29           break; 30         case 1: 31           return "正在檢測"; 32           break; 33         default: 34           break; 35  } 36 });

 

 項目實際二：

<a href="{{value | getOrderDetailUrl}}" target="_self"></a>   //value 就是請求到的data數據。

 1 $.HTTP.obj ({  2         url : "../rest/order/mylistDetail.json",  3  ajaxData :  4  {  5  orderNo : orderNo  6  },  7         success : function (data)  //對應的就是上一個代碼的value。  8  {  9             var navhtml = $ (template ("navTmp", data)); 10             var nav = $ ("#nav").html (navhtml); 11  } 12 });

 1 template.helper("getOrderDetailUrl", function(data0) { //此data0能夠任意命名，可是必須知道的是它表明着請求到的data數據，  2     if(data0.state == -2) {  3         return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo;  4  }  5     if(data0.state == -1) {  6         return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo;  7  }  8     if(data0.state == 0) {  9         return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo; 10  } 11     if(data0.state == 3) { 12         return "order-detail-testres.jsp?orderNo=" + data.orderNo; 13  } 14     if(data0.state == 4) { 15         return "order-detail-testres.jsp?orderNo=" + data0.orderNo; 16  } 17     if(data0.state == 5) { 18         return "order-detail-pay.jsp?orderNo=" + data0.orderNo; 19  } 20     if(data0.state == 6) { 21         return "order-detail-rtservice.jsp?orderNo=" + data.orderNo; 22  } 23     if(data0.state == 7) { 24         return "order-detail-rtservice.jsp?orderNo=" + data0.orderNo; 25  } 26     if(data0.state == 8) { 27         return "order-detail-rtservice.jsp?orderNo=" + data0.orderNo; 28  } 29     return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo; 30 });

 

 項目實際三：

 1 {{#fixCheckInfo | getCheckInfoHtml}}

 1 template.helper("getCheckInfoHtml",function(c) {
 2             var checkInfo = {};  3             var ck = $.parseJSON(c);  4             for(var i in ck) {  5                 if(checkInfo[ck[i].v.toString()] == undefined) {  6                     checkInfo[ck[i].v.toString()] = [];  7  }  8  checkInfo[ck[i].v.toString()].push(ck[i].k); //分類成下面三種數組  9  } 10 
11             var res = '<p class="text-top">檢測項目經過 <img src="images/check-1.png" /></p><table>'; 12 
13             for(var i in checkInfo['1']) { 14                 var x = checkInfo['1'][i]; 15                 res += '<td>' + x + '</td>'; 16                 if((i + 1) % 3 == 0) { 17                     res += '</tr><tr>'; 18  } 19  } 20             res += '</table>' +
21                 '<p class="text-top">檢測項目未經過 <img src="images/check-2.png" /></p><table>'; 22             for(var i in checkInfo['0']) { 23                 var x = checkInfo['0'][i]; 24                 res += '<td>' + x + '</td>'; 25                 if((i + 1) % 3 == 0) { 26                     res += '</tr><tr>'; 27  } 28  } 29             res += '</table>' +
30                 '<p class="text-top">檢測項目未知 <img src="images/check-3.png" /></p><table>'; 31             for(var i in checkInfo['-1']) { 32                 var x = checkInfo['-1'][i]; 33                 res += '<td>' + x + '</td>'; 34                 if((i + 1) % 3 == 0) { 35                     res += '</tr><tr>'; 36  } 37  } 38             res += '</table>'; 39 
40             return res; 41         });

fixCheckInfo：