網上學習了artTemplate前端模板，在此通過一個小示例記錄一下相關知識點。示例有兩個頁面，第一個頁面爲列表頁面，第二個頁面爲商品詳情頁面，瀏覽器打開列表頁面時，js會加載本地data.json文件，然後通過artTemplate模板渲染內容，顯示商品列表。當點擊商品的id時，跳轉至詳情頁面，顯示商品的部分詳情。詳情頁是通過jquery來操作div元素以顯示商品詳情內容。
下面是頁面及json文件
data.json文件
{
"books": [
{
"id": 1,
"imgUrl": "images/ly.jpg",
"price": "45.00",
"title": "論語",
"publish": "人民文學出版社",
"num": "303",
"desc": "內容1"
},
{
"id": 2,
"imgUrl": "images/zy.jpg",
"price": "45.00",
"title": "中庸",
"publish": "人民教育出版社",
"num": "403",
"desc": "內容2"
},
{
"id": 3,
"imgUrl": "images/dx.png",
"price": "45.00",
"title": "大學",
"publish": "機械工業出版社",
"num": "503",
"desc": "內容3"
}
]
}
index.html文件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content td{
padding: 20px;
}
</style>
<script src="../js/jquery.min.js"></script>
<script src="../js/template-web.js"></script>
<script id="list" type="text/html">
<table style="text-align: center;" cellspacing="0" border="1px solid blue">
{{each books as value}}
<tr>
<td><a href="goodDetail.html?booksId={{value.id}}" target="_blank">{{value.id}}</a></td>
<td>{{value.imgUrl}}</td>
<td>{{value.price}}</td>
<td>{{value.title}}</td>
<td>{{value.publish}}</td>
<td>{{value.num}}</td>
<td>{{value.desc}}</td>
</tr>
{{/each}}
</table>
</script>
<script>
$(function () {
$.ajax({
type:"get",
url:"data.json",
dataType:"json",
success:function (res) {
var html1 = template('list', res);
document.getElementById("content").innerHTML = html1;
}
}
);
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
goodDetail.html文件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content td{
padding: 20px;
}
</style>
<script src="../js/jquery.min.js"></script>
<script src="../js/template-web.js"></script>
<script id="list" type="text/html">
<table style="text-align: center;" cellspacing="0" border="1px solid blue">
{{each books as value}}
<tr>
<td><a href="goodDetail.html?booksId={{value.id}}" target="_blank">{{value.id}}</a></td>
<td>{{value.imgUrl}}</td>
<td>{{value.price}}</td>
<td>{{value.title}}</td>
<td>{{value.publish}}</td>
<td>{{value.num}}</td>
<td>{{value.desc}}</td>
</tr>
{{/each}}
</table>
</script>
<script>
$(function () {
$.ajax({
type:"get",
url:"data.json",
dataType:"json",
success:function (res) {
var html1 = template('list', res);
document.getElementById("content").innerHTML = html1;
}
}
);
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>