更新时间:2022年11月15日11时21分 来源:传智教育 浏览次数:
art-template是一款轻量级的JavaScript模板引擎,具有接近JavaScript极限的运行性能、精准的调试功能、简单的语法使用规则、支持JavaScript的原生语法等特性,使得前后端开发时更利于团队协作,分工更加明确。
art-template被托管于GitHub,下载地址是https://github.com/aui/art-template/releases,这里以v4.12.1版本为例讲解。解压下载的art-template-4.12.1.zip后,在使用时仅需将lib目录下的template-web.js文件引入即可。
为了大家更好地理解,下面通过一个案例演示如何利用art-template将Ajax请求到的数据显示到页面中。
art-template编写模板的方法如下:
首先编写模板,HTML代码片段如demo7-3.html所示。
demo7-3.html
<div id="content"></div> <script id="tpl" type="text/html"> <h2>{{title}}</h2> <ul> {{each list value index}} <li>索引:{{index}}, 值:{{value}}</li> {{/each}} </ul> </script>
上述第1行用于展示模板渲染数据后的内容,读者根据实际情况具体设置对应的HTML元素即可。第3~8行代码用于在script标签内编写模板,type值要设置为“text/html”,id用于为模板渲染数据时找到对应的模板。
其中,“{{”和“}}”是art-template标准语法开始和结束的标签。title与list是渲染模板时传递的数据对象中的属性名称。each用于循环对象(如list),value表示属性值或数组元素的值,index表示属性名称或数组元素的索引。需要注意的是,each在使用时一定要添加结束标签,如第7行代码所示。