兼容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>