乐鱼电竞

教育行业A股IPO第一股（股票代码 003032）

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

前端培训jQuery：模板引擎

更新时间:2022年03月31日14时50分 来源:乐鱼电竞 浏览次数:

　　项目开发中，经常需要将后端服务器返回的数据拼接到HTML元素内，再将其显示到页面中。例如，将Ajax从服务器端请求到的数据显示到列表内，就可以通过字符串拼接完成。但若一个项目中多处编写这样的代码，代码会变得复杂且难以维护。此时，可以使用模板引擎将页面结构与数据分离。而art-template因其优越的性能成为开发中最常用的模板引擎之一。本节将针对art-template的使用进行详细讲解。

　　art-template是一款轻量级的JavaScript模板引擎，具有接近JavaScript极限的运行性能、精准的调试性能、简单的语法使用规则、支持JavaScript的原生语法等特性，使得前后端开发时更利于团队协作，分工更加明确。

　　art-template被托管于GitHub，下载地址是https://github.com/aui/art-template/release，这里以v4.12.1版本为例讲解。解压下载的art-template-4.12.1.zip后，在使用时仅需将lib目录下的template-web.js文件引入即可。

　　为了读者更好地理解，下面通过一个案例演示如何利用art-template将Ajax请求到的数据显示到页面中。

　　(1)编写模板

　　首先编写模板，HTML代码片段如demo7-3.html所示。

<div id="content"></div>
<script id="tpl" type="text/html">
    <h2>{}</h2>
    <ul>
        {{each list value index}}
              <li>索引：{{index}}，值：{{value}}</li>
        {{/each}}
    </ul>
</script>

　　demo7-3.html

　　上述第1行用于展示模板渲染数据后的内容，读者根据实际情况具体设置对应的HTML元素即可。第3～8行代码用于在script标签内编写模板，type值要设置为“text/html”，id用于为模板渲染数据时找到对应的模板。

0 分享到：
和我们在线交谈！
【网站地图】【sitemap】