1. 前言
在开发过程中,常常要实现这样一种效果:获取数据,并且插入到当前页面。最基本的做法是把获取到的数据拼接到一个字符串中,然后使用html()或者append()函数插入到页面中。这种做法,拼接字符串时很麻烦。本文中,郝同学要介绍一下ArtTemplate,一个超快的前端模板引擎。
2. 快速上手
2.1. 编写模板
1 2 3 4 5 6 7 8
| <script id="test" type="text/html"> <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul> </script>
|
2.2. 渲染模板
1 2 3 4 5 6
| var data = { title: '标签', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html;
|
3. 模板语法
注意:简洁语法和原生语法引入的js文件不同。
3.1. 简洁语法
1 2 3 4 5 6 7
| {{if admin}} {{include 'admin_content'}}
{{each list}} <div>{{$index}}. {{$value.user}}</div> {{/each}} {{/if}}
|
3.2. 原生语法
1 2 3 4 5 6 7
| <%if (admin){%> <%include('admin_content')%>
<%for (var i=0;i<list.length;i++) {%> <div><%=i%>. <%=list[i].user%></div> <%}%> <%}%>
|
4. 参考文档
Arttemplate by aui
http://aui.github.io/artTemplate/
前端模版artTemplate的介绍及使用
http://blog.csdn.net/playboyanta123/article/details/45536501