JSON模板引擎--artTemplate

一般状况下，在咱们使用ajax请求数据得到一个json格式的响应体，而且要将得到的相应数据填充到HTML页面上的时候，可能须要本身拼接字符串，这样比较麻烦，而使用模板引擎就能够帮咱们省却本身拼接字符串的过程。javascript

使用模板引擎其实就是预先写好HTML结构代码，而后调用模板引擎第三方库，自动把数据填充到这个HTML里。html

今天要介绍的是artTemplate这款模板框架，下载地址：https://github.com/aui/art-template，下载完成以后解压，而后找到 lib 文件夹，把里面的 template-web.js 文件放到你的项目目录下java

1. 基本使用

1.1 准备一个模板

1 <script type="xxxx" id="tpl">
2     <p>
3  我叫<span><%= name %></span>，今年<span><%= age %</span>岁了 4     </p>
5 </script>

说明：git

要用script标签，必须给type属性，可是值能够随便写，只要不是 text/javascript 就能够，可是咱们通常写 text/html
github
必需要给这个script标签加 id ，由于后面须要找到标签内的模板web
模板里就是将来想显示的html代码，只是里面有些值不能写死，要根据json数据来填充，因此把不写死的数据用 <%= 属性名 %> 包起来ajax

1.2 导入框架

<script src="./template-web.js"></script>

1.3 填充模板

1 //JSON字符串转化为对象
2 var obj = JSON.parse(xhr.responseText); 3 
4 //找到tpl，并用obj对象填充,填充后的结果是一段html代码
5 var html = template('tpl',obj); 6 
7 //打印看结果
8 console.log(html);

打印结果为：json

能够看到，当用了模板引擎后，会自动把JSON对应的属性值，填充到模板中一样属性名的地方，以下图数组

2 用模板填充JSON数组

2.1 准备模板

 1 <script type="text/html" id="tpl">
 2         <!-- list是咱们本身起的虚拟数组名  3  到时json数据一拿到，把json数组赋值给这个list  4  就能自动把JSON数组每条数据都遍历成tr显示了  5          -->
 6         <% for(var i = 0;i < list.length; i++){ %>
 7 
 8             <tr>
 9                 <td><%= list[i]['Id'] %></td>
10                 <td><%= list[i]['name'] %></td>
11                 <td><%= list[i]['age'] %></td>
12                 <td><%= list[i]['score'] %></td>
13     </tr>
14         <% } %>
15 </script>

说明：list这个名字能够随便起，用模板填充时，把真实JSON数组传递给list就能够填充了框架

2.2 导入框架（跟基本使用同样）

2.3 填充模板

1 var data = JSON.parse(xhr.responseText); 2 //参数2：list:data 意思是把data这个真实的JSON数组替换掉模板里的list值
3 var html = template('tpl', { list: data }); 4 document.querySelector('tbody').innerHTML = html;

注意：模板里的数组叫list,那么参数2也叫list，要注意别写错。

3 使用框架内置的遍历语法

3.1 语法

{{each list value key}}

说明：
- list是本身定义的虚拟数组或对象，使用模板时用真实JSON数组或对象替换
- 若是list是对象，那么value就是属性值，若是list是数组，那么value获得的就是元素
- 若是list是对象，那么key就是属性名，若是list是数组，那么key就是下标

例：

 1 <script type="text/html" id="tpl">
 2 
 3  {{each list value key}}  4          <tr>
 5              <td>{{value.Id}}</td>
 6              <td>{{value.name}}</td>
 7              <td>{{value.age}}</td>
 8              <td>{{value.score}}</td>
 9          </tr>
10  {{/each}}
11 
12 </script>

3.2 调用模板

1 //把报文转换为JSON数组
2 var data = JSON.parse(xhr.responseText); 3 //使用模板替换
4 var html = template('tpl', { list: data }); 5 //替换后的内容放到网页
6 document.querySelector('tbody').innerHTML = html;

3.3 图解

artTemplate模板引擎的基本使用就这样，按照步骤来就能够了，但愿对你们的学习有所帮助