今天我总结一下art-template 模板引擎这个框架,比较简单
一、文档,以及GitHub
文档: https://aui.github.io/art-template/docs/index.html
GitHub: https://github.com/aui/art-template
二、art-template 的书写方式:
1.原始语法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="js/artTemplate.js"></script>
</head>
<body>
<!--包裹元素-->
<div id="content"></div>
<script id="test" type="text/html">
<%if(admin){%>
<% for(var i=0; i<list.length; i++){%>
<div><%=i%>:<%=list[i]%></div>
<%}%>
<%}else{%>
<div>没有结果!</div>
<%}%>
<!--赋值方法-->
<p><%=person.eatting()%></p>
<h2><% a=person.age %></h2>
<% for(var i=0;i<a.length;i++){ %>
<p><%=a[i] %></p>
<%}%>
<!--$imports 代表console-->
<% $imports.log('hello world') %>
</script>
<script type="text/javascript" src="js/art-template.js"></script>
<script type="text/javascript">
var data = {
admin: true,
list : ["第一个元素","第二个元素"],
person:{
name:"Jhon",
age:[23,24,54,36,56,23,64],
eatting:function(){
console.log("我吃了一个大西瓜");
}
}
};
template.defaults.imports.log = console.log; // 此处展示imports的作用
var html = template('test',data);// test 为模板ID, data数据
// console.log(html)
document.getElementById("content").innerHTML = html;
</script>
</body>
</html>