Underscore.js 的模板功能

  Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能。

  无论你写一段小的js代码,还是写一个大型的HTML5应用,underscore都能帮上忙。目前,underscore已经被广泛使用,例如,backbone.js唯一强依赖的库就是underscore.js。

  Underscore.js学习资源:

  Underscore.js 官网:http://underscorejs.org/#each  

  Underscore.js 中文文档: http://www.css88.com/doc/underscore/ 

今天主要讨论Underscore 的前端模板功能。它的模板功能和前一篇介绍的javascript前端模板是一样的。对数据的处理更加方便。写了个小例,供大家参考学习。

完整实例可以通过这个网址下载:http://pan.baidu.com/share/link?shareid=2509652039&uk=688556984

复制代码
<!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: "http://www.baidu.com",film:"电影1"},{title: "少年派的漂流",url: "http://www.baidu.com",film:"电影2"},{title: "教父",url: "http://www.baidu.com",film:"电影3"},{title: "肖申克的救赎",url: "http://www.baidu.com",film:"电影4"},{title: "3d2012",url: "http://www.baidu.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
复制代码

 本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2012/12/21/2826886.html如需转载请自行联系原作者


@挨踢前端

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/256515.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ANSYS——查看剖面图的应力分布云图以及工作平面的相关设置

剖面图和切片图其实差不多,只是切片图只有一个截面,而剖面图是切去一部分保留另一部分模型,不但可以看到截面处应力分布还可以看到剩余模型的应力分布 切片应力云图可见:https://blog.csdn.net/qq_45769063/article/details/106357700 1.剖面云图的查看 首先将工作平面的…

2016.8.2

高端内存映射方式 高端内存映射分为三种&#xff1a;永久映射、临时映射和非连续动态内存映射。高端内存一般是指896MB以上的页框&#xff0c;这段区间内核一般不能直接访问。 1.永久映射 永久内核映射允许内核建立高端页框到内核地址空间的长期映射。它们使用主内核页表中的一…

深度学习之pytorch(三) C++调用

玩深度学习&#xff0c;个人觉得基于anaconda的python适合开发与测试&#xff0c;C适合实际的工程部署&#xff01;而pytorch官方有编译好的libtorch&#xff0c;特别方便&#xff0c;适合于我这样的伸手党和手残党(win10下编译tensorflow编译了好久都没通过&#xff0c;好忧伤…

机器学习(一) 基于sklearn库的数据集划分(交叉验证)

机器学习中首要环节就是数据集的处理&#xff0c;其中数据集的处理从个人理解(如有错误敬请谅解)的角度来说包括两个方面&#xff1a;数据集划分和数据清理。其中数据集划分是指训练集、验证集和测试集的数据类别划分&#xff1b;数据清理是指数据的清洗、删除等等方面。这两天…

敏捷项目开源管理软件ScrumBasic(2)- 多项目支持

1.加入Project对象模型 public class Project{[Key][MaxLength(32)]public string ID { get; set; }public string Name { get; set; }public int Order { get; set; }public ICollection<UserStory> Stories { get; set; }public ApplicationUser Creator { get; set; }…

postgresql表和列注释(描述)

2019独角兽企业重金招聘Python工程师标准>>> PostgreSQL添加表和列注释。本文为测试表test&#xff0c;默认无注释。 test# \d关联列表架构模式 | 名称 | 类型 | 拥有者 | 大小 | 描述 -------------------------------------------------public | test | …

Fifth scrum meeting - 2015/10/30

概述 从昨天开始&#xff0c;我们的开发工作终于进入了正轨&#xff0c;由于之前没有mooc服务器API接口&#xff0c;一些工作无法进行。 因为我们团队开始开发较晚&#xff0c;因此我们将开发阶段的截至时间定为了下周五&#xff0c;测试阶段则压缩为下周周六和周日两天。 我们…

计算机加入域 不能访问网络位置 解决办法

计算机加入域 不能访问网络位置 解决办法 启动以下服务 本文转自 onesthan 51CTO博客&#xff0c;原文链接&#xff1a;http://blog.51cto.com/91xueit/1660286&#xff0c;如需转载请自行联系原作者

Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下&#xff1a; 景物(SCENE)通过镜头&#xff08;LENS&#xff09;生成的光学图像投射到图像传感器(Sensor)表面上&#xff0c;然后转为电信号&#xff0c;经过A/D&#xff08;模数转换&#xff09;转换…

win10 下pycharm+anaconda 编译生成pyd文件

由于生产部署的问题&#xff0c;需要把用python写的深度学习代码编译为可被调用的文件。上网搜索了下&#xff0c;暂时了解到win10下pyd文件比较流行。下面是直接引用某位博主的结论&#xff0c;个人感觉总结的很好。其中Cython库将已有的Python代码转化为C语言的代码&#xff…

JVM(4)之 使用MAT排查堆溢出

为什么80%的码农都做不了架构师&#xff1f;>>> 接下来讲解如何设置以及当发生堆溢出的时候怎么排查问题。先看一小段代码&#xff1a;   代码中使用了一个无限循环来为list添加对象&#xff0c;如果采用默认的堆大小的话可能要等待好久才能出现堆溢出的错误&a…

caffe 中的一些参数介绍

转自&#xff1a;http://blog.csdn.net/cyh_24/article/details/51537709 solver.prototxt net: "models/bvlc_alexnet/train_val.prototxt" test_iter: 1000 # test_interval: 1000 # base_lr: 0.01 # 开始的学习率 lr_policy: "step" # 学习率的…

python 制作二进制文件数据集(bin)

为了方便进行深度学习的程序调用与实现&#xff0c;需要将excel的数据文件转换为二进制文件。好处就是接口统一&#xff0c;读写速度快&#xff0c;节约空间。 一、调用库 使用xlrd读入execel表格&#xff0c;经过处理后转换为对应的dataframe结构&#xff0c;再使用pickle库…

远程连接mysql数据库注意点记录

一、如何新建独立帐号并设置权限 这里我使用Navicat作为我的数据库管理工具&#xff0c;打开Navicat。 选择“用户”--“新建用户” 输入用户名、主机、密码&#xff0c;需要注意的是&#xff0c;主机那不是写“localhost”&#xff0c;而是写“%” 然后可以设置“服务器权限”…

【域控管理】父域的搭建

从这篇博文开始&#xff0c;所有的域控系统都是在虚拟机中创建的。 在VM里安装Windows Server 2008 R2的方法就不多说了&#xff0c;无脑式安装&#xff0c;略过不提。 进到系统桌面&#xff0c;打开本地连接&#xff0c;设置网卡的IP地址&#xff0c;如下图&#xff1a; 注意&…

tensorflow2 tensorboard可视化使用

tensorflow2自带tensorboard&#xff0c;所以不必再自行安装tensorboard。 一、使用环境 win10 x64&#xff1b; anaconda3tensorflow2&#xff08;cpu版本&#xff09; 二、使用 1.在模型训练之前插入以下代码 log_dir os.path.join(logs) #win10下的bug&#xff0c; if…

IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)...

首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context是图形上下文,可以将其理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个画框. 自己学习时实现的demo&…

eclipse maven jetty插件方式启动项目

2019独角兽企业重金招聘Python工程师标准>>> 1. 2.点击run即可启动项目 参考:maven命令具体含义请自行百度.例子:maven clean的作用 / maven djetty 转载于:https://my.oschina.net/u/3146772/blog/1576710

AWS S3 Windows系统下的文件夹上传基于python

AWS S3 上传文件&#xff0c;基于cmd命令行发现无法上传文件夹&#xff0c;只能上传单个文件&#xff0c;不知道是我能力不行还是什么原因&#xff0c;如果有大佬了解的可以在下面评论下! 一、环境配置 1.win10 X64&#xff1b; 2.awscli 1.18.91 3.python&#xff08;程序…

windows系统环境变量过长解决方案(PATH too long installer unable to modify Path)

在按照官方文档安装PCL库时&#xff0c;发现如下danteng的错误&#xff0c;内心极度崩溃&#xff01;以前也遇到过&#xff0c;当时暂时解决了该问题&#xff0c;现在又遇到了重新解决一次&#xff0c;为了方便以后遇到该问题时不再不知所措&#xff0c;现做个笔记&#xff01;…