新一代 javascript 模板引擎:artTemplate-3.0
下载地址:https://github.com/aui/artTemplate快速上手请参考:https://github.com/aui/artTemplate
通过阅读artTemplate原文,基本上都会运用了,不再重述。
主要的是如何运用数组
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AtrTemplate</title>
</head>
<body>
<div id="content"></div> <script src="js/template-native.js"></script>
<script id="test" type="text/html"> <%for( i = 0; i < content.length; i++) {%>
<h1><%=content[i].title%></h1>
<p>条目内容 : <%=content[i].list%></p>
<%}%> </script> <script> var data = {
content : [
{
title: "artTemplate",
list: "新一代 javascript 模板引擎",
},
{
title: "特性",
list: "性能卓越,执行速度快"
}
]
};
var html = template('test',data); document.getElementById("content").innerHTML = html;
</script>
</body>
</html>
深层运用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AtrTemplate -- 简介</title>
</head>
<body>
<div id="content"></div> <script src="js/template-native.js"></script>
<script id="listtemp"> </script>
<script id="test" type="text/html"> <%for( i = 0; i < content.length; i++) {%>
<h1><%=content[i].title%></h1>
<ul>
<%for( j = 0; j < content[i].list.length; j++) {%>
<li> <%=content[i].list[j]%></li>
<%}%>
</ul>
<%}%> </script> <script> var data = {
content : [
{
title: "artTemplate",
list: ["新一代 javascript 模板引擎"]
},
{
title: "特性",
list: [
"性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍",
"支持运行时调试,可精确定位异常模板所在语句",
" 对 NodeJS Express 友好支持",
"安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)",
" 支持include语句",
"可在浏览器端实现按路径加载模板",
"支持预编译,可将模板转换成为非常精简的 js 文件",
"模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选",
"支持所有流行的浏览器"
]
}
]
};
var html = template('test',data); document.getElementById("content").innerHTML = html;
</script>
</body>
</html>