Underscore.js 的模板功能介绍与应用


Posted in Javascript onDecember 24, 2012

Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能。
无论你写一段小的js代码,还是写一个大型的HTML5应用,underscore都能帮上忙。目前,underscore已经被广泛使用,例如,backbone.js唯一强依赖的库就是underscore.js。
今天主要讨论Underscore 的前端模板功能。它的模板功能和前一篇介绍的javascript前端模板是一样的。对数据的处理更加方便。写了个小例,供大家参考学习。

完整实例下载

<!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="jquery.js"></script> 
<script src="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: "https://3water.com", 
film:"电影1" 
}, 
{ 
title: "少年派的漂流", 
url: "https://3water.com", 
film:"电影2" 
}, 
{ 
title: "教父", 
url: "https://3water.com", 
film:"电影3" 
}, 
{ 
title: "肖申克的救赎", 
url: "https://3water.com", 
film:"电影4" 
}, 
{ 
title: "3d2012", 
url: "https://3water.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('.bbs-nav-ul').hide(); 
}) $('.title').hover(function(){ 
$(this).toggleClass('hover'); 
}) 
$('.ul>li').hover(function(){ 
$(this).toggleClass('hover'); 
}) 
</script
Javascript 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
javascript 星级评分效果(手写)
Dec 24 #Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 #Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 #Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 #Javascript
ajax中get和post的说明及使用与区别
Dec 23 #Javascript
javascript 全选与全取消功能的实现代码
Dec 23 #Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 #Javascript
You might like
php桌面中心(二) 数据库写入
2007/03/11 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
Python break语句详解
2014/03/11 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python打印斐波拉契数列实例
2015/07/07 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
公司前台辞职报告
2014/01/19 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
责任书范本大全
2015/05/11 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
假期读书倡议书3篇
2019/08/19 职场文书