知他人之所知,晓他人之不晓。

欢迎四海朋友,工作上的同行,学习的同学们!

Handlebar之each循环使用

<!DOCTYPE html>
<html>
	<head>
		<META http-equiv=Content-Type content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>each-基本循环使用方法 - by Bruce</title>
	</head>


	<body>
		<h1>each-基本循环使用方法</h1>
		<!--基础html框架-->
		<table>
			<thead>
				<tr>
					<th>each嵌套</th>
				</tr>
			</thead>
			<tbody id="tableList">


			</tbody>
		</table>


		<!--插件引用-->
		<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="js/handlebars-v3.0.0.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中。
			        $('#tableList').html(myTemplate(data));
			      });
		</script>
	</body>


</html>


demo下载地址:点击打开链接

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013059555/article/details/46561285
文章标签: handlebar each嵌套
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭