教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

jQuery插件和前端常用组件:art-template编写模板的方法

更新时间:2022年11月15日11时21分 来源:传智教育 浏览次数:

好口碑IT培训

  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行代码所示。

0 分享到:
和我们在线交谈!