【artTemplate】artTemplate模板引擎入门（二）：原生语法

引入文件

 <script src="./template-native.js"></script>

一.遍历数组

html

<div id="box"></div>

配置模板

<script>
var data = {
title: "Welcome To ArtTemplate",
arr: ["a", "b", "c", "d", "e"],
json: {
a: 'aaa',
b: 'bbb',
c: 'ccc',
d: 'ddd'
}
}
var strhtml = template("tpl", data);
var box = document.getElementById("box");
box.innerHTML = strhtml;
</script>

2.遍历json

配置模板

<script type="text/html" id="tpl">
<ul>
<% for (key in obj) {%>
<li>
<%= key %>---
<%=obj[key]%>
</li>
<%}%>
</ul>
</script>

渲染模板

<script>
var data = {
obj: {
a: 'aaaa',
b: 'bbbb',
c: 'cccc',
d: 'ddddd',
e: 'eeee'
}
}
var strhtml = template("tpl", data);
var box = document.getElementById("box");
box.innerHTML = strhtml;
</script>

3.原生扩展函数

模板

script type="text/html" id="tpl">
<h1>
<%=
toDouble(a)
%>
</h1>
</script>

<script>
var data = {
a: 'aaaaaa'
}
// 声明扩展函数
template.helper("toDouble", function(str) {
return str + "-----双击666"
})
var strhtml = template("tpl", data);
var box = document.getElementById("box");
box.innerHTML = strhtml;
</script>

最后

以上就是还单身鸭子最近收集整理的关于【artTemplate】artTemplate模板引擎入门（二）：原生语法的全部内容，更多相关【artTemplate】artTemplate模板引擎入门（二）内容请搜索靠谱客的其他文章。