为了账号安全,请及时绑定邮箱和手机立即绑定

JSON模板引擎--artTemplate

标签:
Html/CSS

 通常情况下,在我们使用ajax请求数据获得一个json格式的响应体,并且要将获得的相应数据填充到HTML页面上的时候,可能需要自己拼接字符串,这样比较麻烦,而使用模板引擎就可以帮我们省却自己拼接字符串的过程。

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

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

https://img1.sycdn.imooc.com//5b80c2ae0001c70b12470582.jpghttps://img1.sycdn.imooc.com//5b80c2a50001546807620433.jpghttps://img1.sycdn.imooc.com//5b80c2990001546807620433.jpg

1. 基本使用

1.1 准备一个模板

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

说明:

  • 要用script标签,必须给type属性,但是值可以随便写,只要不是 text/javascript 就可以,但是我们一般写 text/html

  • 必须要给这个script标签加 id ,因为后面需要找到标签内的模板

  • 模板里就是未来想显示的html代码,只是里面有些值不能写死,要根据json数据来填充,所以把不写死的数据用 <%= 属性名 %> 包起来

1.2 导入框架

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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);

复制代码

打印结果为:

https://img1.sycdn.imooc.com//5b80c28e0001f14e07870293.jpg

  • 可以看到,当用了模板引擎后,会自动把JSON对应的属性值,填充到模板中同样属性名的地方,如下图

 https://img1.sycdn.imooc.com//5b80c2830001aa4310250205.jpg

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 图解

https://img1.sycdn.imooc.com//5b80c2690001c8ef17940829.jpg

 

artTemplate模板引擎的基本使用就这样,按照步骤来就可以了,希望对大家的学习有所帮助

原文出处:https://www.cnblogs.com/linqb/p/9532552.html

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消