Handlebar之each循环使用

╰半夏微凉° 2022-08-01 06:02 273阅读 0赞

<!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>
    		
    		<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>
    
    
    		
    		
    		
    		<script id="table-template" type="text/x-handlebars-template">
    			{
       {#each this}} 
    			    {
       {#each info}} 
    			        {
       {../name}}的老婆是{
       {this}}<br/> 
    			    {
       {/each}} 
    			{
       {/each}}
    		</script>
    
    
    		
    		<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下载地址：[点击打开链接][Link 1]

[Link 1]: http://download.csdn.net/detail/u013059555/8822287