引入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中的數(shù)據(jù)。 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;

顯示結(jié)果：

<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>

項(xiàng)目實(shí)際一：

根據(jù)id，將data渲染至模板。如果沒有 data 參數(shù)，那么將返回一渲染函數(shù)。

創(chuàng)建模版，并使用ajax請(qǐng)求公共組件app-jquery-http.js請(qǐng)求數(shù)據(jù)渲染至模版。

（1）創(chuàng)建模版：

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

（2）請(qǐng)求數(shù)據(jù)渲染模版。

原生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請(qǐng)求 將數(shù)據(jù)附加在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 //同步請(qǐng)求：鎖住瀏覽器，必須等到該請(qǐng)求結(jié)束后才能進(jìn)行其他操作。 9 }, 10 success : function(list) { //list為一個(gè)json數(shù)組:[object,object,...,object] 11 $("#bannerList").html(template("bannerListTmp", {sub : list})); //template(id,data); 14 } 15 });

?請(qǐng)求到的list如下：

項(xiàng)目實(shí)際二：

1.創(chuàng)建模版：

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>手機(jī)號(hào)</label> 10 <input type="text" readonly value="{{telephone}}" /> 11 <label>個(gè)人標(biāo)簽</label> 12 <input type="text" readonly value="{{tag}}" /> 13 </script>

2.渲染數(shù)據(jù)：

1 <script> 2 var userInfo = {}; 3 $.HTTP.obj({ //type:post 4 url : "../rest/user/detailInfo", 5 success : function(json)(){ //json數(shù)據(jù)如下圖所示 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)

學(xué)渣表示到現(xiàn)在沒看懂文檔里時(shí)間格式器的例子 ? = =|||?

項(xiàng)目實(shí)際一：

1 <span>{{value.state | getOrderState}}</span> // value.state就是請(qǐng)求到的數(shù)據(jù)中的list數(shù)組中每一個(gè)對(duì)象的state數(shù)據(jù)。 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) { //該請(qǐng)求可以獲得兩個(gè)參數(shù)：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可以任意命名，但是必須與后面的保持一致，這個(gè)數(shù)據(jù)是value.state得來的。 2 if(state == -2) { //均為state的數(shù)據(jù) 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的值又是請(qǐng)求得到數(shù)據(jù)中的list數(shù)組中的數(shù)據(jù)。 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 });

?

?項(xiàng)目實(shí)際二：

<a href="{{value | getOrderDetailUrl}}" target="_self"></a> //value 就是請(qǐng)求到的data數(shù)據(jù)。 1 $.HTTP.obj ({ 2 url : "../rest/order/mylistDetail.json", 3 ajaxData : 4 { 5 orderNo : orderNo 6 }, 7 success : function (data) //對(duì)應(yīng)的就是上一個(gè)代碼的value。 8 { 9 var navhtml = $ (template ("navTmp", data)); 10 var nav = $ ("#nav").html (navhtml); 11 } 12 });

1 template.helper("getOrderDetailUrl", function(data0) { //此data0可以任意命名，但是必須知道的是它代表著請(qǐng)求到的data數(shù)據(jù)， 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 });

?

?項(xiàng)目實(shí)際三：

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); //分類成下面三種數(shù)組 9 } 10 11 var res = '<p class="text-top">檢測項(xiàng)目通過 <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">檢測項(xiàng)目未通過 <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">檢測項(xiàng)目未知 <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：

?

轉(zhuǎn)載于:https://www.cnblogs.com/cryst/p/5843160.html

總結(jié)

以上是生活随笔為你收集整理的artTemplate-3.0（与项目实际结合）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。