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

引入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中的数据。
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;

显示结果：

<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）创建模版：

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

（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 <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>手机号</label>
10    <input type="text" readonly value="{{telephone}}" />
11    <label>个人标签</label>
12    <input type="text" readonly  value="{{tag}}" />
13 </script>

2.渲染数据：

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

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

项目实际一：

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

项目实际二：

<a href="{{value | getOrderDetailUrl}}" target="_self"></a>   //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 = '<p class="text-top">检测项目通过 <img src="data: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">检测项目未通过 <img src="data: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">检测项目未知 <img src="data: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：

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

artTemplate-3.0（与项目实际结合）相关推荐

ASP.NET Core 2.0 : 三. 项目结构
ASP.NET Core 2.0 : 三. 项目结构原文:ASP.NET Core 2.0 : 三. 项目结构本章我们一起来对比着ASP.NET Framework版本看一下ASP.NET Cor ...
安卓项目打开有时候manifests不见了_【必看】暴力0鲁项目详细操作及玩法如何跳过广告,不分享群等...
Lao Su想请你帮忙超强黑科技分享站每次整理编辑图文推荐好东西都很耗时,老苏在此请大家里获取干货的同时,点点下面AD,喜欢的点个在看.可以留言告诉老苏,你需要的软件现在微信公众号的推荐机制改了 ...
android studio项目总结,android studio 3.0 升级项目遇到的问题及更改思路(问题小结)...
Android Studio从3.0版本新增了许多功能,当然首当其冲就是从3.0版本新增了对 Kotlin 开发语言的支持,除此之外还有其他一些新功能,例如:Android Profiler (其中包 ...
使用 JIRA 4.0 + Greenhopper 4.0 进行项目状态跟踪(转)
http://www.blogjava.net/haha1903/archive/2009/11/01/300609.html 使用 JIRA 4.0 + Greenhopper 4.0 进行项目状态 ...
ASP.NET报错集合一----.net4.0创建项目后，在iis上部署项目，无法浏览，提示404
前言:这些错误纯属自己在开发项目的时候遇到的问题,比较有针对性.如果有解决不了的问题,请勿喷. 问题描述: .net4.0创建项目后,在iis上部署项目,无法浏览,提示404 搭建项目的环境: 项目是 ...
LAMP环境中如何重新部署一个Yii2.0 web项目
使用Yii2.0 framework开发的项目,使用Github进行版本控制,现在要把这个项目部署到一个新的电脑/系统中: (1)安装LAMP (2)在/var/www/html目录下执行 git c ...
paddlepaddle-VisualDL2.0对项目进行可视化调参
如果需要更好的阅读体验,可以在ai studio上fork该项目:使用VisualDL2.0对项目进行可视化调参调参是深度学习必须要做的事情.数据和模型处理好后,需要进行模型训练,这个时候就需要进行 ...
idea2020.2.2怎么创建web项目_创建Vue3.0的项目
1. 查看Vue的环境版本 Vue -V 如果版本低于4.0,则需要升级Vue的版本 npm install -g @vue/cli 2. 创建Vue 3.0的项目 3. VS Code 的环境配置 ...
VS2005 ASP.NET2.0安装项目的制作(包括数据库创建、站点创建、IIS属性修改、Web.Config文件修改)
站点: 如果新建默认的Web安装项目,那它将创建的默认网站下的一个虚拟应用程序目录而不是一个新的站点.故我们只有创建新的安装项目,而不是Web安装项目.然后通过安装类进行自定义操作,创建新站如下图: ...
Ant Desing Pro2.0(一)项目初始化
1.写在前面最近做毕设的时候发现网络上关于ant designpro2.0版本的基础入门资料太少,我一个后端开发人员当时入门也是跌跌撞撞,现在我将我所学的分享出来,避免大家少走一些弯路. 2.开发环 ...

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

artTemplate-3.0（与项目实际结合）相关推荐

最新文章

热门文章