art-template简介
art-template 是一个简约、超快的模板引擎。中文官网首页为 aui.github.io/art-templat…
art-template的安装
在浏览器中访问 aui.github.io/art-templat… 页面,找到下载链接后,鼠标右键, 选择“链接另存为”,将 art-template 下载到本地,然后,通过
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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 中 -->
<!-- 3.2 模板的type表示把里边的数据当成html来解析 -->
<!-- 3.3 双花括号里边的数据要被解析 -->
<script type="text/html" id="tpl-user">
<h1>{{name}} ------ {{age}}</h1>
{{@ test}}
<div>
{{if flag === 0}}
flag的值是0
{{else if flag === 1}}
flag的值是1
{{/if}}
</div>
<ul>
{{each hobby}}
<li>索引是:{{$index}},循环项是:{{$value}}</li>
{{/each}}
</ul>
<h3>{{regTime | dateFormat}}</h3>
</script>
<script>
// 定义处理时间的过滤器
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d
}
// 2. 定义需要渲染的数据,数据里边的键与模板HTML中双花括号里的对应
var data = {
name: 'zs',
age: 20,
test: '<h3>测试原文输出</h3>',
flag: 1,
hobby: ['吃饭', '睡觉', '写代码'],
regTime: new Date()
}
// 4. 调用 template 函数,需要用到模板的id,以及模板所渲染的数据,得出渲染出的字符串
var htmlStr = template('tpl-user', data)
console.log(htmlStr)
// 5. 使用渲染出的字符串
$('#container').html(htmlStr)
</script>
</body>
</html>
```
```