如何优雅的把后台数据（通常是JSON）轻松渲染到html页面
如何优雅的把后台数据（通常是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>
