Handlebar之each循环使用

原创 2015年06月19日 14:40:23
<!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下载地址:点击打开链接

版权声明:本文为博主原创文章,未经博主允许不得转载。

handlebars-----each循环嵌套中使用索引

1 DOCTYPE html> 2 html> 3 head> 4 META http-equiv=Content-Type content="text/html; charset=...
  • whh_lydia
  • whh_lydia
  • 2015年08月31日 16:46
  • 4286

handlebars-----each循环使用方法

1 DOCTYPE html> 2 html> 3 head> 4 META http-equiv=Content-Type content="text/html; charset=...
  • whh_lydia
  • whh_lydia
  • 2015年08月31日 15:33
  • 1739

Ember.js 入门指南——handlebars遍历标签

这一篇将为你介绍遍历标签,数组的遍历几乎在任何的常用的开发语言中都能看到,也是使用非常广泛的一个功能。下面我将为大家介绍handlebars的遍历标签,其使用方式与EL表达式几乎是一样的。...
  • CHEN_DE_QUAN
  • CHEN_DE_QUAN
  • 2015年09月16日 00:32
  • 654

Handlebar之each循环使用

each-基本循环使用方法 - by Bruce each-基本循环使用方法 each嵌套 ...
  • u013059555
  • u013059555
  • 2015年06月19日 14:40
  • 2046

Handlebar嵌套遍历数据

通过两层 {{#each}}来进行实现, 对应handlebar模版 {{#each rows}} {{typeName}} ...
  • Tx_Fanyin
  • Tx_Fanyin
  • 2017年07月15日 17:40
  • 172

for-each循环优先于传统的for循环

对于遍历数组或者集合的元素来说,一般我们都会想到用传统的for循环,要么使用数组下标进行索引,要么使用集合的迭代器进行遍历,迭代器和索引变量在每个循环中出现三次,其中有两次是非常容易出现错误的,一旦出...
  • huahua168168357
  • huahua168168357
  • 2016年09月30日 22:11
  • 766

Java中For-Each循环的使用

for-each这种集合的遍历方法最初是在Perl中接触的foreach。开始的时候受C语言的影响多少有些不习惯,不过写了两段代码之后就觉得十分适应了,因为这种描述方式与我们的日常表达语言十分相似。再...
  • grey_csdn
  • grey_csdn
  • 2017年03月13日 01:15
  • 586

handlebars-----each嵌套

1 DOCTYPE html> 2 html> 3 head> 4 META http-equiv=Content-Type content="text/html; charset=...
  • whh_lydia
  • whh_lydia
  • 2015年08月31日 15:58
  • 486

handlebars.js模版引擎中EACH循环遍历的使用

  • kuangshp128
  • kuangshp128
  • 2017年04月05日 15:41
  • 1041

js中each用法及跳出each及if多层循环

var save = function() { var obj = {}; var flag = true; ...
  • a809918928
  • a809918928
  • 2016年05月19日 13:55
  • 3754
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Handlebar之each循环使用
举报原因:
原因补充:

(最多只允许输入30个字)