模板

模板是用在那里
我们在做应用层面的项目开发,一般都是客户端给服务器发个请求,服务器给客户端响应数据。
客户端得到数据,解析数据,将数据跟html 标签进行组装,然后放在页面上面.
我们在解析数据,以及组装数据的时候非常麻烦
模板:是帮助我们解析json 格式的数据,然后将数据跟html 标签进行组装


我要使用这个模板,一般什么时候会用
数据非常复杂的情况下,会使用模板进行解析.

 

流行的模板引擎

BaiduTemplatehttp://tangram.baidu.com/BaiduTemplate/ b百度

ArtTemplate:https://github.com/aui/artTemplate t腾讯

velocity.jshttps://github.com/shepherdwind/velocity.js/ a阿里

Handlebars:http://handlebarsjs.com/ 国外

 

一个页面可能会涉及到多次数据交互,就会用到多个模板。

 1  /*
 2     * 1:引入模板文件
 3     * 2:创建模板 <script type="text/template" id="templateId">
 4     * 3:将数据跟模板进行绑定 ,调用template-native.js 下面的一个template方法.
 5     *   模板的id需要解析的数据.
 6     * 4:假设我将数据跟模板进行绑定之后,模板文件template-native.js就会去解析模板里面的内容
 7     * 5:要准备模板里面的内容,模板里面的内容跟写到页面里面的标签有关系.
 8     * 6:我需要在模板里面去解析数据.我需要在模板里面去解析数据。
 9     * 7:在模板里面解析数据,模板提供两种语法
10     *       1:一种是原生的语法
11     *       2:新语法.
12     *       模板里面支持两种类型的标签  <% %> 是用来写逻辑的,里面放的都是js 逻辑代码
13     *       <%="kaikeba"%>
14     * */
15 
16     /*
17     * 模板的作用:将数据跟模板进行绑定,然后使用模板去解析数据,将数据跟标签进行组装,组装好之后返回一个新的字符串
18     * 最后我们把这个字符串放在页面上面就可以
19     * 使用模板的步骤
20     *        要解析数据的时候,要将数据跟页面的标签进行拼接的时候
21     *        1:引入模板文件  template-native.js  {{}}
22     *        2:创建模板  <script type="text/template" id="templateId">
23     *        3:将数据跟模板进行绑定  我们使用template 方法 ,这个方法  template-native.js 文件下面的
24    *         4:我要在模板里面去解析数据,然后跟标签的内容进行拼接
25       *      5:准备模板内容,模板内容跟写到页面上面的内容有关系
26     *        6:解析数据  <% 写逻辑 %>  <%= 用来向模板输出js 里面的变量的值%>
27     *        7:调用template 方法会一个字符串,将这个内容写到页面对应的位置即可.
28     * */

 art template模板each遍历使用方法 

1.标准语法(对象中有数组)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7     <title>Document</title>
 8   </head>
 9   <body>
10     <div></div>
11     <script src="art-template.js"></script>
12 
13     <script src="../jQuery/jquery.min.js"></script>
14     <script>
15       $(document).ready(function() {
16         var List = [
17           {
18             List_name: "电脑配件",
19             subList: [
20               {
21                 subList_name: "笔记本",
22                 subsubList: ["笔记本1", "笔记本2", "笔记本3", "笔记本4"]
23               },
24               {
25                 subList_name: "台式机",
26                 subsubList: ["台式机1", "台式机2", "台式机3", "台式机4"]
27               },
28               {
29                 subList_name: "交换机",
30                 subsubList: ["交换机1", "交换机2", "交换机3", "交换机4"]
31               },
32               {
33                 subList_name: "路由器",
34                 subsubList: ["路由器1", "路由器2", "路由器3", "路由器4"]
35               }
36             ]
37           }
38         ];
39         console.log(List[0].subList);
40 
41         var html = template("template1", { test: List });
42         $("div").append(html);
43       });
44     </script>
45     <script type="text/template" id="template1">
46           <tr>
47            {{each test[0].subList[0].subsubList  value i }}
48            <td>{{value}}------------------{{i+1}}</td>
49            {{/each}}
50           </tr>
51         <tr>
52                 {{each test[0].subList[1].subsubList  value i }}
53                 <td>{{value}}------------------{{i+1}}</td>
54                 {{/each}}
55         </tr>
56         <tr>
57               {{each test[0].subList[2].subsubList  value i }}
58               <td>{{value}}------------------{{i+1}}</td>
59               {{/each}}
60       </tr>
61       <tr>
62               {{each test[0].subList[3].subsubList  value i }}
63               <td>{{value}}------------------{{i+1}}</td>
64               {{/each}}
65       </tr>
66     </script>
67   </body>
68 </html>

2.标准语法(数组中有对象)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7     <title>Document</title>
 8   </head>
 9   <body>
10     <body>
11       <table>
12         <tr>
13           <td>省份</td>
14           <td>省份</td>
15           <td>省份</td>
16           <td>省份</td>
17           <td>省份</td>
18           <td>省份</td>
19         </tr>
20       </table>
21     </body>
22     <script src="art-template.js"></script>
23 
24     <script src="../jQuery/jquery.min.js"></script>
25 
26     <script>
27       $(function() {
28         var arr = [
29           { name: "湖南", happy: "西安", victory: "北京", yahoo: "重庆" },
30           { name: "苹果", happy: "橘子", victory: "西瓜", yahoo: "草莓" }
31         ];
32 
33         var html = template("test1", { test: arr }); //将数组转为对象
34         $("table").append(html);
35       });
36     </script>
37 
38     <script id="test1" type="text/html">
39 
40       {{each test}}
41       <tr>
42           <td>{{$value.name}}</td>
43           <td>{{$value.happy}}</td>
44           <td>{{$value.victory}}</td>
45       </tr>
46       {{/each}}
47     </script>
48   </body>
49 </html>

 

3.原始语法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../js/jquery.min.js"></script>
 7     <script src="../js/template-native.js"></script>
 8     <style>
 9         table {
10             width: 600px;
11             border-collapse: collapse;
12         }
13         td {
14             height: 40px;
15             text-align: center;
16             border: 1px solid #CCC;
17         }
18     </style>
19 
20 </head>
21 <body>
22 <input type="text" id="start" placeholder="始发站" value="武汉">
23 <input type="text" id="end" placeholder="终点站" value="长沙">
24 <input type="button" value="查询">
25 <table>
26     <tr>
27         <td>车次</td>
28         <td>类型</td>
29         <td>出发站</td>
30         <td>到达站</td>
31         <td>出发时间</td>
32         <td>到达时间</td>
33         <td>距离</td>
34         <td>预定</td>
35     </tr>
36 </table>
37 <script type="text/template" id="templateId">
38     <%for(var i=0;i<result.list.length;i++){%>
39         <tr>
40             <td><%=result.list[i].trainno%></td>
41             <td><%=result.list[i].type%></td>
42             <td><%=result.list[i].station%></td>
43             <td><%=result.list[i].endstation%></td>
44             <td><%=result.list[i].departuretime%></td>
45             <td><%=result.list[i].arrivaltime%></td>
46             <td><%=result.list[i].priceyz%></td>
47             <td><input type="button" value="预定" data-trainno="<%=result[i].trainno%>"></td>
48         </tr>
49     <%}%>
50 </script>
51 <script>
52     $(function(){
53 
54            $("input[type=button]").on("click",function(){
55                    var start=$("#start").val();
56                    var end=$("#end").val();
57                    $.ajax({
58                         url:"",
59                         data:{
60                             appkey:"",
61                             start:start,
62                             end:end
63                         },
64                         type:"GET",
65                         dataType:"jsonp",/*开启跨域*/
66                         success:function(data){
67                             console.log(data);
68                              //渲染到页面.
69                             /*
70                             * 使用的腾讯的 artTemplate
71                             * */
72                             var html=template("templateId",data);
73                             console.log(html);
74                             $("table").append(html);
75                         }
76                    })
77 
78            });
79 
80           /*这个数据是从后台过来的预定按钮要添加点击事件.*/
81           $("table").delegate("input[type=button]","click",function(){
82               console.log(this.dataset.trainno);
83           })
84     });
85 </script>
86 </body>
87 </html>

 

posted @ 2019-04-07 15:13  一路向北√  阅读(311)  评论(0编辑  收藏  举报

web应用开发&研究 -

业精于勤而荒于嬉。

工作,使我快乐。


Font Awesome | Respond.js | Bootstrap中文网