art-template的小demo分享（代码分析）
程序员文章站
2023-10-31 09:18:04
art-template的小demo分享（代码分析）
art-template的小demo分享（代码分析）
<!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>
<!-- 1引入art-template的js文件 -->
<script src="./template-web.js"></script>
<!-- 2开始编译模板 -->
<script type="text/tmpl" id="tmpl">
<% for(var i=0;i<arr.length;i++){%>
<tr>
<td>
<%= arr[i].id%>
</td>
<td>
<%= arr[i].name%>
</td>
<td>
<%= arr[i].age%>
</td>
</tr>
<% } %>
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</body>
<script>
// // 3.自定义的数组
var arr = [{
"id": 1,
"name": "小红",
"age": 10
}, {
"id": 2,
"name": "小刚",
"age": 11
}, ];
// // 4 传入数据之后模板会自动遍历
var
str = template("tmpl", {
arr: arr
});
// "tmpl"是编译模板是对应的id；{arr:arr}放的是对象 // 5获取tbody这个元素，然后利用dom中的innerhtml获取str变量里面的内容
document.getelementbyid("tbody").innerhtml = str;
// 3-5放在最后是因为如果放在<table>之前的话tbody还没有加载，会出现报错；
// 如果不想放在table后面，还可以使用window.onload=function(){3-5步骤放在里面}
// <!--
// window.onload=function(){
// // 3.自定义的数组 var arr = [{ "id": 1, "name": "小红", "age": 10 }, { "id": 2, "name": "小刚", "age": 11 }, ]; // 4传入数据之后模板会自动遍历 var
// str = template("tmpl", { arr: arr }); // "tmpl"是编译模板是对应的id；{arr:arr}放的是对象 // 5获取tbody这个元素，然后利用dom中的innerhtml获取str变量里面的内容
// document.getelementbyid("tbody").innerhtml = str;}
</script>
</html>