通常情况下, 在我们使用 ajax 请求数据获得一个 json 格式的响应体, 并且要将获得的相应数据填充到 html 页面上的时候, 可能需要自己拼接字符串, 这样比较麻烦, 而使用模板引擎就可以帮我们省却自己拼接字符串的过程.
使用模板引擎其实就是预先写好 HTML 结构代码, 然后调用模板引擎第三方库, 自动把数据填充到这个 HTML 里.
今天要介绍的是 artTemplate 这款模板框架, 下载地址: https://github.com/aui/art-template, 下载完成之后解压, 然后找到 lib 文件夹, 把里面的 template-web.js 文件放到你的项目目录下
1. 基本使用
1.1 准备一个模板
<script type="xxxx" id="tpl">
<p>
我叫 < span><%= name %></span>, 今年 < span><%= age %</span > 岁了
</p>
</script>
说明:
要用 script 标签, 必须给 type 属性, 但是值可以随便写, 只要不是 text/javascript 就可以, 但是我们一般写 text/html
必须要给这个 script 标签加 id , 因为后面需要找到标签内的模板
模板里就是未来想显示的 html 代码, 只是里面有些值不能写死, 要根据 json 数据来填充, 所以把不写死的数据用 <%= 属性名 %> 包起来
1.2 导入框架
<script src="./template-web.js"></script>
1.3 填充模板
- //JSON 字符串转化为对象
- var obj = JSON.parse(xhr.responseText);
- // 找到 tpl, 并用 obj 对象填充, 填充后的结果是一段 html 代码
- var html = template('tpl',obj);
- // 打印看结果
- console.log(html);
打印结果为:
可以看到, 当用了模板引擎后, 会自动把 JSON 对应的属性值, 填充到模板中同样属性名的地方, 如下图
2 用模板填充 JSON 数组
2.1 准备模板
<script type="text/html" id="tpl">
<!-- list 是我们自己起的虚拟数组名
到时 json 数据一拿到, 把 json 数组赋值给这个 list
就能自动把 JSON 数组每条数据都遍历成 tr 显示了
-->
<% for(var i = 0;i <list.length; i++){ %>
<tr>
<td><%= list[i]['Id'] %></td>
<td><%= list[i]['name'] %></td>
<td><%= list[i]['age'] %></td>
<td><%= list[i]['score'] %></td>
</tr>
<% } %>
</script>
说明: list 这个名字可以随便起, 用模板填充时, 把真实 JSON 数组传递给 list 就可以填充了
2.2 导入框架 (跟基本使用一样)
2.3 填充模板
- var data = JSON.parse(xhr.responseText);
- // 参数 2:list:data 意思是把 data 这个真实的 JSON 数组替换掉模板里的 list 值
- var html = template('tpl', { list: data });
- 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 就是下标
例:
<script type="text/html" id="tpl">
{{each list value key}}
<tr>
<td>{{value.Id}}</td>
<td>{{value.name}}</td>
<td>{{value.age}}</td>
<td>{{value.score}}</td>
</tr>
{{/each}}
</script>
3.2 调用模板
- // 把报文转换为 JSON 数组
- var data = JSON.parse(xhr.responseText);
- // 使用模板替换
- var html = template('tpl', { list: data });
- // 替换后的内容放到网页
- document.querySelector('tbody').innerHTML = html;
3.3 图解
来源: https://www.cnblogs.com/linqb/p/9532552.html