依然学习art-template模板引擎
官方地址：
http://aui.github.io/art-template/zh-cn/index.html
使用步骤
1 下载并在html页面中用script标签进行引用
2 准备art-template模板
<script id="temp1" type="text/html">
<div class="box"></div>
</script>
3 告诉引擎，要将哪一个模板和哪一个数据进行拼接
var html = template('temp1',{name:'zhangsan',age:15})
4 讲拼接好的html字符串添加到页面中
document.getElementById('container'),innerHTML = html
4 通过模板语法告诉模板引擎，数据和html字符串应该如何拼接
<script id="temp1" type="text/html">
<div class="box">{{ name }}</div>
</script>
完整代码：
<!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>
<script src="./javascripts/template-web.js"></script>
</head>
<body>
<div id="container"></div>
<script id="temp1" type="text/html">
<div class="box">{{ name }}</div>
</script>
<script>
var html = template('temp1',{name:'zzz',age:15})
document.getElementById('container').innerHTML = html
</script>
</body>
</html>
开放函数到模版中
有时需要在外部编写函数，开放到模版中直接调用，如时间格式处理函数
function fn(data){
return .....
}
template.defaults.imports.fn = fn
//然后就可以在模版中直接使用fn这个函数了
注：如果原本的fn函数是在全局作用域中的，也可以直接
$imports.fn()
如果不在全局中，则需要像上面那样开放到模板中
网友评论