|
如何优雅的把后台数据（通常是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
找个表格演示
Document
学生信息表
姓名
性别
芳龄
班级
备注
模拟后台的数据，假设后台返回了一个学生列表，如下（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"必须这样写
{{#each this}}
{{name}}
{{gender}}
{{age}}
{{classes}}
{{note}}
{{/each}}
渲染数据
//获取需要放数据的容器
var container = document.querySelector('#container');
//也就是获取我们定义的模板的dom对象。主要是想获取里面的内容（innerHTML）
var templateDom = document.querySelector('#template');
//编译模板的里的内容
var template = Handlebars.compile(templateDom.innerHTML);
//把后台获取到的数据student渲染到页面
container.innerHTML = template(student);
4. 附上完整代码
|