一、文档
http://aui.github.io/art-template/zh-cn/
二、示例代码
<html>
<head>
<title>art-template模板引擎</title>
</head>
<body>
<div>
<div id="span">
<div id="tpl1">
<span>
{{value}}
{{$imports.test(1)}}
</span>
</div>
</div>
<div id="list">
<div id="tpl2">
{{each list}}
<div>{{$value.name}}</div>
{{/each}}
</div>
</div>
<div id="test">
<div id="tpl3">
{{each list2}}
<div>
{{$value.name}}
</div>
{{/each}}
</div>
</div>
</div>
<script src="./js/template-web.js"></script>
<script>
//自定义函数
template.defaults.imports.test = function (data) {
return 'ok - ' + data;
};
html = template("tpl1", {value: 123});
document.getElementById("span").innerHTML = html;
html = template("tpl2", {list: [{name: "test1"}, {name: "test2"}, {name: "test3"}]});
document.getElementById("list").innerHTML = html;
html = template("tpl3", {list2: [{name: "test1"}, {name: "test2"}, {name: "test3"}]});
document.getElementById("test").innerHTML = html;
</script>
</body>
</html>三、子模板传参
<html>
<head>
<title>art-template模板引擎</title>
</head>
<body>
<div>
<div id="span">
<script id="tpl1" type="text/html">
<span>
{{value}}
{{$imports.test(1)}}
</span>
{{include 'tpl2' list}}
</script>
</div>
<script id="tpl2" type="text/html">
{{each $data}}
<div>{{$value.name}}</div>
{{/each}}
</script>
</div>
<script src="./js/template-web.js"></script>
<script>
//自定义函数
template.defaults.imports.test = function (data) {
return 'ok - ' + data;
};
html = template("tpl1", {value: 123, list: [{name: "test1"}, {name: "test2"}, {name: "test3"}]});
document.getElementById("span").innerHTML = html;
</script>
</body>
</html>
