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 相关文章推荐
jquery异步请求实例代码
Jun 21 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
Vue实现菜单切换功能
Nov 08 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 图片上添加透明度渐变的效果
2009/06/29 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
Python命名空间详解
2014/08/18 Python
python实现bucket排序算法实例分析
2015/05/04 Python
利用Python破解斗地主残局详解
2017/06/30 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python实现AES加密和解密
2019/03/27 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
社会实践心得体会
2014/01/03 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
小学语文教学反思
2014/02/10 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
单位政审意见范文
2015/06/04 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
SQL之各种join小结详细讲解
2021/08/04 MySQL
基于Python实现射击小游戏的制作
2022/04/06 Python