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嵌套及源码浅读

Handlebars模板引擎作为时下最流行的模板引擎之一,已然在开发中为我们提供了无数便利。作为一款无语义的模板引擎,Handlebars只提供极少的helper函数,还原模板引擎的本身,也许这正是他...

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

1 DOCTYPE html> 2 html> 3 head> 4 META http-equiv=Content-Type content="text/html; charset=...

Java中For-Each循环的使用

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

PHP学习笔记——使用list(),each(),while()循环遍历数组

]
  • iheyu
  • iheyu
  • 2017年05月29日 19:07
  • 153

VB For each循环实例

  • 2010年06月07日 14:23
  • 36KB
  • 下载

C++新特性之lambda表达式在for_each循环中的使用及for循环新写法

以前,在lambda表达式没有进入标准的时候,对容器的遍历等涉及到使用函数指针的情况,一般人会懒得使用std::for_each,也许只是一个短短的几句话,却要单独写个函数,或函数对象,写的代码反而不...
  • jack_20
  • jack_20
  • 2017年06月26日 16:43
  • 502

ajax回调json数组对象,jquery中$.each()循环解析

头一回把代码写成这样(thinkphp5.0),自己都不知道获取到的json数组已经是几维,但是前台使用js解析的过程中还是蛮辛苦的,大致流程如下:-代码工作流程: -get到相应界面后,ajax异步...

js循环。for,each

Click Here this is a div this is a p this is a span this is a b this is a em $(function(){ ...

在C++中实现foreach循环,比for_each更简洁!

python,c#,java里面都有类似于foreach的结构,stl里面虽然有for_each这个函数,但是感觉使用还是太繁琐了一些,所以就自己实现了一个。 先来看看stl里面的for_each函数...

java之学习笔记(13)-------------数组学习以及循环机制中for each讲解

目录(?)[+] 数组详细解析! 数组中可分为以下几种:一维数组、二维数组、以及多维数组。 定义数组   方式1(推荐,更能表明数组类型)   type[] 变量名 = new type...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Handlebar之each循环使用
举报原因:
原因补充:

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