兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html)
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>each嵌套 - by 杨元</title> </head> <body> <h1>each嵌套</h1> <!--基础html框架--> <div id="dataList"></div> <!--插件引用--> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句--> <!--id可以用来唯一确定一个模版,type是模版固定的写法--> <script id="table-template" type="text/x-handlebars-template"> {{#each this}} {{#each info}} {{../name}}的{{this}}<br> {{/each}} {{/each}} </script> <!--进行数据处理、html构造--> <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = [{ "name":"张三", "info":[ "眼睛", "耳朵", "鼻子" ] },{ "name":"李四", "info":[ "爸爸", "妈妈", "妻子" ] }]; //注册一个Handlebars模版,通过id找到某一个模版,获取模版的html框架 //$("#table-template").html()是jquery的语法,不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。 $('#dataList').html(myTemplate(data)); }); </script> </body> </html>