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

引入artTemplate.js

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

方法

1.template(id, data)

文档示例：

 <div id="content"></div>
 <script id="test" type="text/html">
 <h1>{{title}}</h1>
 <ul>
     {{each list as value i}}
         <li>狗子{{i + 1}} ：{{value}}</li>   //value是list中的数据。
     {{/each}}
 </ul>
 </script>

 var data = {
     title: '宝宝喜欢的狗种类',
     list: ['拉布拉多', '萨摩耶', '塞罗纳', '边牧', '京巴', '牛头梗', '松狮']
 };
 var html = template('test', data);
 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）创建模版：

 <div id="banner">
     <ul id="bannerList">                

     </ul>
 <script type="text/html" id="bannerListTmp">         //先通过（2）请求到数据，才能加载数据到模版。
         {{each sub as value i }}                     // 等价于：for(var i in sub) ，由（2）可知sub是数组
         <li><img src="{{value.imgPath}}" /></li>     // {{}}
         {{/each}}
 </script>
 </div>

（2）请求数据渲染模版。

原生js方式。

 $.ajax({
      type :"GET",
      async : false,
      url : ../bbs/topic/list,
      data : {isBanner:true,pageSize:5},
      dataType : "json",
      success:function(list){
           $("#bannerList").html(template("bannerListTmp",{sub:list}));
                },
      error : function(XMLHttpRequest, textStatus, errorThrown) {
           var info = "XMLHttpRequest:" + JSON.stringify(XMLHttpRequest)+ " ;textStatus:" + textStatus + "; errorThrown:"+ JSON.stringify(errorThrown) + ";【" + url + "】";
           console.log(info);
   });

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

     $.HTTP.list({                    //type:"GET"
         url : "../bbs/topic/list",
         ajaxData : {                //GET请求 将数据附加在url后，附加后的url为：http://127.0.0.1:8080/geekbar/bbs/topic/list?isBanner=true&pageSize=5
             isBanner : true,        //在链接后拼接形如：?a=1&b=2,不影响链接本身。
             pageSize : 5
         },
         ajaxOption : {
             async : false     //同步请求：锁住浏览器，必须等到该请求结束后才能进行其他操作。
         },
         success : function(list) {   //list为一个json数组:[object,object,...,object]
             $("#bannerList").html(template("bannerListTmp", {sub : list}));  //template(id,data);
         }
     });

请求到的list如下：

项目实际二：

1.创建模版：

 <form action="" id="infoDetail">
 </form>
 <script type="text/html" id="infoDetailTmp">
    <img src="{{imgPath}}" />
    <label>姓名</label>
    <input type="text"  readonly value="{{nickname}}" />
    <label>性别</label>
    <input type="text" value="{{if sex==0}}男{{else}}女{{/if}}" readonly />
    <label>手机号</label>
    <input type="text" readonly value="{{telephone}}" />
    <label>个人标签</label>
    <input type="text" readonly  value="{{tag}}" />
 </script>

2.渲染数据：

 <script>
      var userInfo = {};
      $.HTTP.obj({                         //type:post
          url : "../rest/user/detailInfo",
          success : function(json)(){    //json数据如下图所示
          userInfo = json.data;
          var html = template('infoDetailTmp', userInfo);
          document.getElementById("infoDetail").innerHTML = html;
      }
      });
 </script>

2.template helper(name, callback)

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

项目实际一：

 <span>{{value.state | getOrderState}}</span>  // value.state就是请求到的数据中的list数组中每一个对象的state数据。

  $.HTTP.list({
  url : "rest/order/mylist.json",
  ajaxData : {
  pageNo : pageNo,
  pageSize : 5,
  search : searchInput.val(),
  state : state
  },
  success : function(list, pInfo) {     //该请求可以获得两个参数：list和pageInfo
  var d = template("myOrderTmp", {
  sub : list                              //each sub as value i
  });
  $("#myOrderList").append(d);
  pageInfo = pInfo;
  }
  });

 template.helper("getOrderState", function(state) {    //该state可以任意命名，但是必须与后面的保持一致，这个数据是value.state得来的。
     if(state == -2) {     //均为state的数据
         return "已取消";
     }
     if(state == -1) {
         return "待下单";
     }
     if(state == 0) {
         return "已寄出";
     }
     if(state == 3) {
         return "已检测";
     }
     if(state == 4) {
         return "维修中";
     }
     if(state == 5) {
         return "待付款";
     }
     if(state == 6) {
         return "待寄回";
     }
     if(state == 7) {
         return "待签收";
     }
     if(state == 8) {
         return "订单完成";
     }
     if(state == 1) {
         return "正在检测";
     }
 });

使用switch...case

 template.helper("getOrderState", function(state) {   //该state可以任意命名，但是必须知道它表示的是 value.state,value的值又是请求得到数据中的list数组中的数据。
     switch(state){
         case -2:
           return "已取消";
           break;
         case -1:
           return "待下单";
           break;
         case 0:
           return "已寄出";
           break;
         case 3:
           return "已检测";
           break;
         case 4:
           return "维修中";
           break;
         case 5:
           return "待付款";
           break;
         case 6:
           return "待寄回";
           break;
         case 7:
           return "待签收";
           break;
         case 8:
           return "订单完成";
           break;
         case 1:
           return "正在检测";
           break;
         default:
           break;
     }
 });

项目实际二：

<a href="{{value | getOrderDetailUrl}}" target="_self"></a>   //value 就是请求到的data数据。

 $.HTTP.obj ({
         url : "../rest/order/mylistDetail.json",
         ajaxData :
         {
             orderNo : orderNo
         },
         success : function (data)     //对应的就是上一个代码的value。
         {
             var navhtml = $ (template ("navTmp", data));
             var nav = $ ("#nav").html (navhtml);
         }
 });

 template.helper("getOrderDetailUrl", function(data0) {     //此data0可以任意命名，但是必须知道的是它代表着请求到的data数据，
     if(data0.state == -2) {
         return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo;
     }
     if(data0.state == -1) {
         return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo;
     }
     if(data0.state == 0) {
         return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo;
     }
     if(data0.state == 3) {
         return "order-detail-testres.jsp?orderNo=" + data.orderNo;
     }
     if(data0.state == 4) {
         return "order-detail-testres.jsp?orderNo=" + data0.orderNo;
     }
     if(data0.state == 5) {
         return "order-detail-pay.jsp?orderNo=" + data0.orderNo;
     }
     if(data0.state == 6) {
         return "order-detail-rtservice.jsp?orderNo=" + data.orderNo;
     }
     if(data0.state == 7) {
         return "order-detail-rtservice.jsp?orderNo=" + data0.orderNo;
     }
     if(data0.state == 8) {
         return "order-detail-rtservice.jsp?orderNo=" + data0.orderNo;
     }
     return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo;
 });

项目实际三：

 {{#fixCheckInfo | getCheckInfoHtml}}

 template.helper("getCheckInfoHtml",function(c) {
             var checkInfo = {};
             var ck = $.parseJSON(c);
             for(var i in ck) {
                 if(checkInfo[ck[i].v.toString()] == undefined) {
                     checkInfo[ck[i].v.toString()] = [];
                 }
                 checkInfo[ck[i].v.toString()].push(ck[i].k);      //分类成下面三种数组
             }

             var res = '<p class="text-top">检测项目通过 <img src="data:images/check-1.png" /></p><table>';

             for(var i in checkInfo['1']) {
                 var x = checkInfo['1'][i];
                 res += '<td>' + x + '</td>';
                 if((i + 1) % 3 == 0) {
                     res += '</tr><tr>';
                 }
             }
             res += '</table>' +
                 '<p class="text-top">检测项目未通过 <img src="data:images/check-2.png" /></p><table>';
             for(var i in checkInfo['0']) {
                 var x = checkInfo['0'][i];
                 res += '<td>' + x + '</td>';
                 if((i + 1) % 3 == 0) {
                     res += '</tr><tr>';
                 }
             }
             res += '</table>' +
                 '<p class="text-top">检测项目未知 <img src="data:images/check-3.png" /></p><table>';
             for(var i in checkInfo['-1']) {
                 var x = checkInfo['-1'][i];
                 res += '<td>' + x + '</td>';
                 if((i + 1) % 3 == 0) {
                     res += '</tr><tr>';
                 }
             }
             res += '</table>';

             return res;
         });

fixCheckInfo：