快速上手—js前端模板引擎——artTemplate的初次使用

2019-04-14 17:11发布生成海报

站内文章 / 模拟电子

12304 0

前段时间接触到artTemplate这个前端模板引擎，发现其使用方便，容易理解，故写下此文，本文我们主要快速上手，不过多介绍理论，关于他的性能可参考点击artTemplate的github是(https://github.com/aui/artTemplate)
使用
artTemplate的库分为两种，一种是原生的语法类似jsp中的表达式，另一种是简洁版，这里我们使用简洁版

遍历语法

由此示例可以看出，artTemplate的简洁版语法是以“{{}}”，此实例用的script标签的type类型是"text/html"。遍历的语法结构为{{each json数据 as 别名下标}}，下标参数可以选择性使用，它是从0开始。这里要注意，{{each list as l}}中的“list” 一定要跟json数据的key对应。

js处

这里我们手动写一个json数据结构，大家可以改为ajax返回的json，var html=template(‘chulai’,data);，template（选中的script的id，放入的数据）
由此，data就放入到上面的script了，这时候我们可以解除掉 console.log(html);的注释，可以看到，控制台输出了上面script里的内容，由几条数据，就遍历几条，并且值也封装进去了，接下来我们只需要将这些标签内容放入要放的标签内document.getElementById(“list”).innerHTML=html;

var data={
      			"list":[
      				{"id":10010,"title":"第一个","context":"好啥都奥活动啊实打实地哦啊啥都奥啥都奥啥都爱上奥啥都爱上","images":"img/image1.jpg"},
      				{"id":10011,"title":"第二个","context":"好啥都奥活动啊实打实地哦啊啥都奥啥都奥啥都爱上奥啥都爱上","images":"img/image2.jpg"},
      				{"id":10012,"title":"第三个","context":"好啥都奥活动啊实打实地哦啊啥都奥啥都奥啥都爱上奥啥都爱上","images":"img/image3.jpg"}	
      			]
      		};
      		var html=template('chulai',data);
      		//console.log(html);
      		document.getElementById("list").innerHTML=html;

常用的也就是遍历方法，至于其他的大家可以参考官方文档。