模板引擎art-template

当把接口中的数据以某种格式放置在前端页面上时，通常情况下我们使用字符串的拼接。如果数据量大的时候，不妨使用模板引擎

http://aui.github.io/art-template/zh-cn/

使用方法：

1、下载template-web.js文件、

2、引入该js文件

3、创建模板，注意模板内容放在script标签中，给该标签一个id，type设置为text/html。建议使用====text/x-template

4、准备数据

5、调用template方法得到渲染结果，该方法有2个参数，一个是放置模板的script标签的id，另一个是准备的数据

6、 将渲染结果的HTML 设置到 默认元素的 innerHTML 中

 

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/template-web.js"></script>
 7     </head>
 8     <body>
 9         <table border="1" cellspacing="0" cellpadding="0" id="tab"></table>
10         <!--准备模板-->
11         <script id="tpl" type="text/x-template">
12             {{each comments}}
13              <!-- each 内部 $value 拿到的是当前被遍历的那个元素 -->
14                 <tr>
15                     <td>{{$value.author}}</td>
16                     <td>{{$value.content}}</td>
17                     <td>{{$value.created}}</td>
18                     <td>{{$value.email}}</td>
19                     <td>{{$value.id}}</td>
20                     <td>{{$value.parent_id}}</td>
21                     <td>{{$value.post_id}}</td>
22                     <td>{{$value.post_title}}</td>
23                 </tr>
24             {{/each}}
25         </script>
26         <script>
27             //创建XMLHTTPRquest对象
28             var xhr=new XMLHttpRequest();
29             xhr.open("GET","http://localhost/xampp/test.php")
30             xhr.send();
31             xhr.onreadystatechange=function(){
32                 if(xhr.readyState!=4)return;
33                 var res=JSON.parse(this.responseText);
34                 //准备数据
35                 var context={comments:res.data}
　　　　　　　　　　　//借助模板引擎的API 渲染数据
36                 var html=template("tpl",context);
37                 document.getElementById("tab").innerHTML=html;
38             }
39         </script>
40     </body>
41 </html>

 

posted @ 2018-08-28 17:43  夏日凉白开  阅读(879)  评论(0)    收藏  举报