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;好忧伤…

ANSYS入门——模态分析步骤与实例详解

目录 一、ANSYS求解模态分析步骤 建模 施加载荷和求解

javascript库之Mustache库使用说明

一、简单示例 代码&#xff1a; 1 function show(t) { 2 $("#content").html(t); 3 } 4 5 var view { 6 title: YZF, 7 cacl: function () { 8 return …

Light OJ 1007

求区间欧拉函数平方和。。。 最后因为longlong 范围爆了WA 了&#xff0c; 0.0 #include<bits/stdc.h> using namespace std; const int maxn 5000000 131; typedef unsigned long long LL;bool Com[maxn]; LL Num[maxn], Prim[maxn / 3]; int Cnt;void INIT() {Num[1]…

MVC架构设计——EF-Code First

详情参考:http://www.cnblogs.com/guomingfeng/archive/2013/05/28/mvc-ef-repository.html转载于:https://www.cnblogs.com/shuai7boy/p/5807678.html

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

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

ANSYS——模态分析的理论基础

目录 一、模态分析理论基础 线性与非线性 振动与固有频率 振动方程与振动模态

购物中心潮--我的创业之路

2014年10一个月&#xff0c;我在中国大陆从北我的两个小伙伴跑到最南边中国内地。大半个中国删除更多。早在北京成立购潮商城。2014年11月&#xff0c;购潮商城正式上线。上线当天突破零订单。2014年12月&#xff0c;正式推广市场。渗透大学生校园。2015年2月至今&#xff0c;正…

敏捷项目开源管理软件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 | …

ANSYS——模态提取方法简介

目录 block lancoze法 supspace(子空间法) powerdynamics reduced(缩减法) unsymmetric(非对称法) 阻尼法和QR阻尼法

python 使用小知识总结(持续更新ing)

这篇博客主要针对于使用python来进行深度学习/机器学习过程各方面小知识的总结。习惯于使用C这种严谨的语言&#xff0c;改换到python这门相对来说开放式的语言需要很多学习&#xff0c;而作为一个菜鸡&#xff0c;遇到编程问题解决了之后不到一周就会忘记&#xff0c;在此仅作…

Fifth scrum meeting - 2015/10/30

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

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

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

ANSYS——模态分析的载荷施加问题以及约束的施加问题

本文续自《ANSYS入门——模态分析步骤与实例详解》:https://blog.csdn.net/qq_45769063/article/details/106389171 目录 1.模态分析的激励是从哪里来的?

【effective c++】继承与面向对象设计

1.确定你的public继承塑造出is-a关系 public继承意味着is-a.适用于base classes身上的每一件事情一定也适用于derived classes身上,因为每一个derived classes对象也都是一个base class对象&#xff0c;反过来不成立。 2.避免隐藏继承而来的名称 c名称查找不考虑类型&#xff0…

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…