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

引入artTemplate.js

方法

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：

巴特西

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

最新文章

热门文章