使用JSTmplate向頁面渲染數據
1.引入模板
2.定義JSTmplate模板
3.將數據賦值給模板
4.把賦值後的模板中的值放到相應位置
示例代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--1.引入模板-->
<script src="js/template.js"></script>
</head>
<body>
<div id="content">
</div>
<!--2.定義js模板-->
<script id="myTpl" type="text/html">
<!--直接賦值-->
<h1>{{title}}</h1>
<!--判斷-->
{{if isAdmin}}
<p>顯示p</p>
{{/if}}
<!--遍歷-->
{{each list as value}}
<li>{{value}}</li>
{{/each}}
</script>
<script>
var data = {
title:'射手',
isAdmin:true,
score:61,
list:['魯班','孫尚香','馬可波羅','公孫離','後裔','伽羅']
};
/*3.將數據賦值給模板*/
var html = template('myTpl',data);
/*4.把賦值後的模板中的值放到相應的位置*/
document.getElementById("content").innerHTML=html;
</script>
</body>
</html>