artTemplate3.0（与项目实际结合） Cryst

引入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}));
           9      },
     error : function(XMLHttpRequest, textStatus, errorThrown) {
          var info = "XMLHttpRequest:" + JSON.stringify(XMLHttpRequest)+ " ;textStatus:" + textStatus + "; errorThrown:"+ JSON.stringify(errorThrown) + ";【" + url + "】";
          console.log(info);
 14 });

使用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="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="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="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：