underscore.js入门及_each使用实例 -

bijian1013

浏览: 3244095 次
性别:
来自: 深圳

最近访客更多访客>>

seal1002

dy.f

godandghost

lovefiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

underscore.js入门及_each使用实例

博客分类：

underscore

underscore.js _each

underscore是一个非常实用的JavaScript库，提供许多编程时需要的功能的支持，他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能。无论你写一段小的js代码，还是写一个大型的HTML5应用，underscore都能帮上忙。目前，underscore已经被广泛使用，例如，backbone.js唯一强依赖的库就是underscore.js。
_each实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Underscore</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="format-detection" content="telephone=no"/>
	<link href="index.css" rel="stylesheet" type="text/css" />
	<script src="lib/jquery-1.9.1.js"></script>
	<script src="lib/underscore.js"></script>
</head>

<body>
</body>
</html>

<!--ace-template demo-->
<script id="t2" type="text/template">
		<%_.each(datas, function(item) {%>
			<div class="outer">
				<div class="title">
					<span><%=item.film%></span>
				</div>
				<ul class="ul">
					<%_.each(datas, function(item) {%>
						<li>
							<a href="<%=item.url%>">【<%=item.title%>】</a>
						</li>
					<%});%>
				</ul>						
			</div>
		<%});%>
</script>

<!--数据 -->
<script>
		var datas = [
			{
				title: "一九四二",
				url: "http://www.sina.com",
				film:"电影1"
			},
			{
				title: "少年派的漂流",
				url: "http://www.taobao.com",
				film:"电影2"
			},
			{
				title: "教父",
				url: "http://www.baidu.com",
				film:"电影3"
			},
			{
				title: "肖申克的救赎",
				url: "http://www.yihaodian.com",
				film:"电影4"
			},
			{
				title: "3d2012",
				url: "http://www.sohu.com",
				film:"电影5"
			}
		];		
		$("body").html( _.template($("#t2").html(), datas));
</script>

<!--点击下拉事件-->
<script type="text/javascript">
		$('.ul').hide();
		$('.ul>li:last-child').addClass('last-li');
		$('body>div:first-child>ul').show();
		$('.title').click(function(){
			$(this).siblings().toggle();
			$(this).parent().siblings().children('.ul').hide();
		})
		$('.title').hover(function(){
			$(this).toggleClass('hover');
		})
		$('.ul>li').hover(function(){
			$(this).toggleClass('hover');
		})
</script>

依赖的index.css文件

body{background: #ccc;}

.outer{padding-bottom:8px;}
.title {
	background-color: #FFF;
	height: 32px;
	font-size:15px;
	line-height:32px;
	padding-left:22px;
	border-radius:3px;
	box-shadow:0 3px 3px gray;
	border:2px solid #FFF;
}
.title.hover{border-color:#ff9a16;}
.title span {font-weight: bold;color: #292929;}

.ul {padding-right: 2px;padding-left: 2px;}
.ul li {
	color: #767676;
	height: 35px;
	border: 1px solid #d1d1d1;
	border-top:none;
	font-size: 14px;
	line-height: 35px;
	background-color: #f5f5f5;
	padding-left:16px;
}
.ul li a{color: #767676;text-decoration:none;}
.ul li.hover{background-color:#FFF;}
.ul li.last-li{
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
}

运行效果：