简介
art-template是一个简约、超快的模板引擎，中文官网首页：http://aui.github.io/art-template/zh-cn/index.html
安装
在浏览器访问：http://aui.github.io/art-template/zh-cn/docs/installation.html
找到文件，点击进入后，鼠标右键，选择“另存为”，将art-template下载到本地，然后通过 <script>标签加载到网页上进行使用。
基本使用
1.使用传统方式渲染UI结构
代码语言：javascript复制 var data = {
title: '<h3>用户信息</h3>',
name: 'zs',
age: 20,
isVIP: true,
regTime: new Date(),
hobby: ['吃饭', '睡觉', '打豆豆']
}
$(function () {
$('#name').html(data.name)
$('#title').html(data.title)
$('#age').html(data.age)
$('#isVIP').html(data.isVIP)
$('#regTime').html(data.regTime)
var rows = []
$.each(data.hobby, function (i, item) {
rows.push('<li>' item '</li>')
})
$('#hobby').html(rows.join(''))
})2.使用art-template使用步骤
- 导入art-template
- 定义数据
- 定义模板
- 调用template函数
- 渲染HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入模板引擎 -->
<!-- 在window全局，多一个函数，叫做template('模板的ID,需要渲染的数据对象') -->
<script src="./lib/template-web.js"></script>
<script src="./lib/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 3.定义模板 -->
<!-- 3.1模板的HTML结构，必须定义到Script标签中 -->
<script type="text/html" id="tpl-user">
<h1>姓名：{{name}} 年龄：{{age}}</h1>
</script>
<script>
//2.定义需要渲染的数据
var data = { name: 'zs', age: 20 }
//4.调用template函数
var htmlstr = template('tpl-user', data)
// console.log(htmlstr);
$('#container').html(htmlstr)
</script>
</body>
</html>标准语法
atr-template提供了 {{}}这种语法格式，在{{}}内可以进行变量输出，或循坏数组等操作，这种{{}}语法在art-template中被称为标准语法。
输出
在{{}}语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。
代码语言：javascript复制{{value}}
{{obj.key}}
{{obj['key']}}
{{a?b:c}}
{{a||b}}
{{a b}}例：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入模板引擎 -->
<!-- 在window全局，多一个函数，叫做template('模板的ID,需要渲染的数据对象') -->
<script src="./lib/template-web.js"></script>
<script src="./lib/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 3.定义模板 -->
<!-- 3.1模板的HTML结构，必须定义到Script标签中 -->
<script type="text/html" id="tpl-user">
<div>
{{if flag==0}}
flag的值是0
{{else if flag===1}}
flag的值是1
{{/if}}
</div>
</script>
<script>
//2.定义需要渲染的数据
var data = { flag: 0 }
//4.调用template函数
var htmlstr = template('tpl-user', data)
// console.log(htmlstr);
$('#container').html(htmlstr)
</script>
</body>
</html>循环输出
如果要实现循环输出，则可以在{{}}内，通过each语法循环数组，当前循环的索引使用 index进行访问，当前的循环项使用 value进行访问。
代码语言：javascript复制{{each arr}}
{{$index}} {{$value}}
{{/each}}过滤器
过滤器的本质，就是一个function处理函数。
代码语言：javascript复制{{value | filterName}}过滤器的语法类似管道操作符，它的上一个输出作为下一个输入。
基本语法：
代码语言：javascript复制template.defaults.inports.filerName = function(value){/*return处理的结果*/}案例：
代码语言：javascript复制 <h3>{{regTime | dateFormat}}</h3>定义一个格式化时间的过滤器dateFormat如下：
代码语言：javascript复制 template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear()
var m = date.getMonth() 1
var d = date.getDate()
return y '-' m '-' d
}注意：过滤器最后一定要return一个值。
