art-template模板引擎
5、art-template模板引擎
5.1 art-template简介
art-template 是一个简约。超快的模板引擎，文官网首页为http://aui.github.io/art-template/zh-cn/index.html
5.2 art-template安装
在浏览器中访问http://aui.github.io/art-template/zh-cn/docs/installation.html页面，找到下载链接后，鼠标右键,选择“链接另存为”，将art-template下载到本地，然后，通过<script>标签加载到网页上进行使用
5.3、基本使用
5.3.1、art-template的使用步骤
1、导入art-template
<script src="js/template-web.js"></script>2、定义数据
var data = { name: 'zs', age: 20 }3、定义模板
模板的html必须在 srcipt 中
<body>
<div id="container"></div>
//注意: 这里script 的 tyoe值时 text/html
<script type="text/html" id="tpl">
<h1>{{name}} ---- {{age}}</h1>
</script>
</body>4、调用template函数
第一个参数是模板id 第二个是模板参数
var a = template('tpl', data)5、导入jQuery
<script src="js/jquery.min.js"></script>6、渲染HTML结构
$('#container').html(a)5.4、art-template标准语法
art-template 提供了 {{ }} 这种语法格式，在{内可以进行变量输出，或循环数组等操作，这种 {{ }} 语法在 art-template 中被称为 标准语法。
5.4.1、标准语法 — 输出
语法格式如下：
{{value}}
{{obj.keyl}}
{{obj['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。
5.4.2、标准语法 — 原文输出
如果要输出的value值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染
语法格式：
{{ @ value }}代码实现：
<script type="text/html" id="tpl">
{{@ test}}
</script>js代码:
var data = {test: '<h3>测试</h3>'}
var a = template('tpl', data)
console.log(a);
$('#container').html(a)5.4.3、标准语法 — 条件输出
如果要实现条件输出，则可以在 {{ }} 中使用 if ...else if .../if 的方式。进行按需输出
语法格式：
{{if 条件}}按需输出的内餐{{/if]}
{{if 条件}}按需输出的内容{{else if 条件}}按需输出的内容{/if}}代码实现如下：
<div>
{{if flag == 0}}
flag值是 0
{{else if flag == 1}}
flag值是 1
{{/if}}
</div>js:
var data = {flag: 1}
var a = template('tpl', data)
console.log(a);
$('#container').html(a)5.4.4、标准语法 — 循环输出
如果要实现循环输出，则可以在{{ }}内，通过each语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使角 $value 进行访问、
语法格式：
{{each arr}}
{{$indax}}{{$value}}
{{/each}}示例：
<script type="text/html" id="tpl">
<ul>
{{each hobby}}
<li>索引是:{{ $index }},循环项:{{ $value }}</li>
{{/each}}
</ul >
</script>js：
<script>
var data = {hobby: ['吃饭', '睡觉', '写代码'] }
var a = template('tpl', data)
console.log(a);
$('#container').html(a)
</script>5.4.5、标准语法 — 过滤器
5.4.5.1、什么是过滤器
5.4.5.2、过滤器的语法
过滤器语法类似管道操作符，它的上一个输出作为下一个输入
语法格式：
{{value l filterName}}template.defaults.imports.filterName = function(value){ /*return处理的结果*/}5.4.5.3、代码实现
实现格式
<div>注册时间:{{regTime | dateFormat}}</ div>示例：
<div id="container"></div>
<script type="text/html" id="tpl">
<h3>{{regTimg | guolv}}</h3>
</script>js：
// 定义过滤时间的过滤器
template.defaults.imports.guolv = function (date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d
}
var data = {regTimg: new Date() }
var a = template('tpl', data)
console.log(a);
$('#container').html(a)
