模板
模板是用在那里
我们在做应用层面的项目开发，一般都是客户端给服务器发个请求，服务器给客户端响应数据。
客户端得到数据，解析数据，将数据跟html 标签进行组装，然后放在页面上面.
我们在解析数据，以及组装数据的时候非常麻烦
模板:是帮助我们解析json 格式的数据，然后将数据跟html 标签进行组装
我要使用这个模板，一般什么时候会用
数据非常复杂的情况下，会使用模板进行解析.
流行的模板引擎
ArtTemplate：https://github.com/aui/artTemplate t腾讯
velocity.js：https://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>
