artTemplate-3.0（与项目实际结合）

引入artTemplate.js

 1  

方法

 1.template(id, data)

文档示例：

1 

2 

1 var data = {
2     title: '宝宝喜欢的狗种类',
3     list: ['拉布拉多', '萨摩耶', '塞罗纳', '边牧', '京巴', '牛头梗', '松狮']
4 };
5 var html = template('test', data);
6 document.getElementById('content').innerHTML = html;

显示结果：

宝宝喜欢的狗种类

     
狗子1：拉布拉多
     
狗子2：萨摩耶
     
狗子3：塞罗纳
     
狗子4：边牧
     
狗子5：京巴
     
狗子6：牛头梗
     
狗子7：松狮

项目实际一：

根据id，将data渲染至模板。如果没有 data 参数，那么将返回一渲染函数。

创建模版，并使用ajax请求公共组件app-jquery-http.js请求数据渲染至模版。

（1）创建模版：

 1 
                                                        
 2     
id="bannerList">                
 3 
 4     
                                               
 5 
10 

（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 

 2 
 3 

2.渲染数据：

 1 

 2.template helper(name, callback)

学渣表示到现在没看懂文档里时间格式器的例子   = =||| 

项目实际一：

1 {{value.state | getOrderState}}  // 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 });

 

 项目实际二：

   //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 = '
检测项目通过 
';
1213for(var i in checkInfo['1']) {
14var x = checkInfo['1'][i];
15                 res += '';
16if((i + 1) % 3 == 0) {
17                     res += '';
18                }
19            }
20             res += '
 
                              
' + x + '
                 
  
' +
21                 '
检测项目未通过 
';
22for(var i in checkInfo['0']) {
23var x = checkInfo['0'][i];
24                 res += '';
25if((i + 1) % 3 == 0) {
26                     res += '';
27                }
28            }
29             res += '
                              
' + x + '
                 
  
' +
30                 '
检测项目未知 
';
31for(var i in checkInfo['-1']) {
32var x = checkInfo['-1'][i];
33                 res += '';
34if((i + 1) % 3 == 0) {
35                     res += '';
36                }
37            }
38             res += '
                              
' + x + '
                 
  
';
39 
40             return res;
41         });

fixCheckInfo：

 

转载于:https://www.cnblogs.com/cryst/p/5843160.html