如何優雅的把后台數據（通常是JSON）輕松渲染到html頁面
在我們做前后端分離的時候，都有遇到過一些看起卡很簡答，確無從下手的問題把。比方說后台給了前端一個list集合，集合里面有很多學生，我們現在要對這些學生在前端渲染展示。我們怎么辦？
當然如果你是使用了強大的框架，完全不必要在意這些問題了。
但是當我們啥都沒有的時候，我們可以考慮使用handlerbars這款強大的工具。可以非常輕松，侵入化很小，快捷的實現數據到頁面的渲染。
1. 模板引擎handlerbars
- 官方網站：http://handlebarsjs.com/
- handlerbars簡介：是一個純js的庫，主要功能通過對view和data的分離來快速構建Web模板，可以很方便簡潔的使用
- 語法超級簡單 {{key}},通過兩個花括號包起來，更多語法參考官方文檔[【官方文檔】](http://handlebarsjs.com/guide/#what-is-handlebars)
2. 效果展示
3. 最簡單的使用demo
- 准備個測試頁面，頁面引入handlebars.js
- 引入handlerbars.js
- 找個表格演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- //todo 2 我們找個表格演示下 -->
<!-- <h3>學生信息表</h3> -->
<table width="500" align="center" cellspacing="0" cellpadding="6">
<caption>學生信息表</caption>
<thead>
<tr align="center">
<td>姓名</td>
<td>性別</td>
<td>芳齡</td>
<td>班級</td>
<td>備注</td>
</tr>
</thead>
<tbody>
<!--//todo 表格內容使用模板渲染 -->
</tbody>
</table>
<!--//todo 1 引入handlerbars工具 -->
<script src="./js/handlebars.js"></script>
</body>
</html>
- 模擬后台的數據，假設后台返回了一個學生列表，如下（student）
var student = [
{name: '魯班七號', gender: '未知', age: '20', class: '一年級射手班', note: '智商二百五的電玩小子，biubiubiu，就是腿短！'},
{name: '安琪拉', gender: '女', age: '18', class: '一年級法師班', note: '什么什么魔法書！'},
{name: '程咬金', gender: '男', age: '30', class: '一年級二班', note: '愛與正義之斧，偷偷推到'},
{name: '阿珂', gender: '女', age: '19', class: '三年級刺客班', note: '哪里亮了點哪里，都是我的人頭！'},
{name: '李白', gender: '男', age: '20', class: '一年級酒酒仙班', note: '但願長醉不願醒，我是來無影去無蹤，帥!'},
{name: '森瑤', gender: '女', age: '20', class: '皮膚班級', note: '不然夢會碎還是破！'}
]
- 定義模板，注意type="text/x-handlebars-template"必須這樣寫
<!--//todo 表格內容使用模板渲染 -->
<script type="text/x-handlebars-template" id="template">
{{#each this}}
<tr align="center">
<td>{{name}}</td>
<td>{{gender}}</td>
<td>{{age}}</td>
<td>{{classes}}</td>
<td>{{note}}</td>
</tr>
{{/each}}
</script>
- 渲染數據
//獲取需要放數據的容器
var container = document.querySelector('#container');
//也就是獲取我們定義的模板的dom對象。主要是想獲取里面的內容（innerHTML）
var templateDom = document.querySelector('#template');
//編譯模板的里的內容
var template = Handlebars.compile(templateDom.innerHTML);
//把后台獲取到的數據student渲染到頁面
container.innerHTML = template(student);
4. 附上完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"">
<title>m-web</title>
</head>
<body>
<!-- <h3>學生信息表</h3> -->
<table border="1" width="700" align="center" cellspacing="0" cellpadding="6">
<caption>學生信息表</caption>
<thead>
<tr align="left">
<td>姓名</td>
<td>性別</td>
<td>芳齡</td>
<td>班級</td>
<td>備注</td>
</tr>
</thead>
<tbody id="container">
<!--//todo 表格內容使用模板渲染 -->
<script type="text/x-handlebars-template" id="template">
{{#each this}}
<tr align="left">
<td>{{name}}</td>
<td>{{gender}}</td>
<td>{{age}}</td>
<td>{{classes}}</td>
<td>{{note}}</td>
</tr>
{{/each}}
</script>
</tbody>
</table>
<script src="./js/handlebars.js"></script>
<script>
var student = [
{name: '魯班七號', gender: '未知', age: '20', classes: '一年級射手班', note: '智商二百五的電玩小子，biubiubiu，就是腿短！'},
{name: '安琪拉', gender: '女', age: '18', classes: '一年級法師班', note: '什么什么魔法書！'},
{name: '程咬金', gender: '男', age: '30', classes: '一年級二班', note: '愛與正義之斧，偷偷推到'},
{name: '阿珂', gender: '女', age: '19', classes: '三年級刺客班', note: '哪里亮了點哪里，都是我的人頭！'},
{name: '李白', gender: '男', age: '20', classes: '一年級酒酒仙班', note: '但願長醉不願醒，我是來無影去無蹤，帥!'},
{name: '森瑤', gender: '女', age: '20', classes: '皮膚班級', note: '不然夢會碎還是破！'}
]
//獲取需要放數據的容器
var container = document.querySelector('#container');
//也就是獲取我們定義的模板的dom對象。主要是想獲取里面的內容（innerHTML）
var templateDom = document.querySelector('#template');
//編譯模板的里的內容
var template = Handlebars.compile(templateDom.innerHTML);
//把后台獲取到的數據student渲染到頁面
container.innerHTML = template(student);
</script>
</body>
</html>