一个计算机技术爱好者与学习者

0%

artTemplate模板引擎

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

  • 本文作者: 好好学习的郝
  • 原文链接: https://www.voidking.com/dev-arttemplate/
  • 版权声明: 本文采用 BY-NC-SA 许可协议,转载请注明出处!源站会即时更新知识点并修正错误,欢迎访问~
  • 微信公众号同步更新,欢迎关注~