Underscore是一个非常实用的JavaScript库，提供许多编程时需要的功能的支持，他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能,需要了解的朋友可以详细参考下
 
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: "http://www.jb51.net", 
film:"电影1" 
}, 
{ 
title: "少年派的漂流", 
url: "http://www.jb51.net", 
film:"电影2" 
}, 
{ 
title: "教父", 
url: "http://www.jb51.net", 
film:"电影3" 
}, 
{ 
title: "肖申克的救赎", 
url: "http://www.jb51.net", 
film:"电影4" 
}, 
{ 
title: "3d2012", 
url: "http://www.jb51.net", 
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 

Underscore.js 的模板功能介绍与应用的更多相关文章

  1. Underscore.js 的模板功能

    Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能. 无论你写一段小的js代码,还是写一 ...

  2. underscore.js中模板函数应用

    一.使用技术要点 (1)使用zepto.js的ajax请求; (2)使用underscore.js的_.template设定模板,模板一般以<script type="text/tem ...

  3. underscore.js定义模板遇到问题：Uncaught TypeError: Cannot read property 'replace' of undefined

    代码正确缩进位置如下, extend "layout" block 'content',-> div ->'nihao' script id:"Invoice ...

  4. 学习在requirejs下如何使用underscore.js模板

    近期在学习underscore.js 这个小而美的js库,是前端 MVC 框架backbone依赖库,他的模板方法主要应用场景是ajax交互过程到页面需要大量的字符串拼接,这部分如果一旦不够仔细就很容 ...

  5. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  6. Underscore.js 入门-常用方法介绍

    Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库作为自 ...

  7. Javascript模块化编程(三)require.js的用法及功能介绍

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战.我采用的是一个非常流行的库require.js感兴趣的朋友可以了解下啊 我采用的是一个非常流行的 ...

  8. HiShop2.x版本中的上传插件分析，得出所用的模板语言为Underscore.js 1.6.0且自己已修改

    效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popb ...

  9. 用nw.js开发markdown编辑器-已完成功能介绍

    这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/10/29/hexomd-introduction   文章目录 1. 功能列表 ...

随机推荐

  1. ExceptionDemo

    功能: 利用struts.xml 捕获异常  不满足这三个值就报异常 1.web.xml <?xml version="1.0" encoding="UTF-8&q ...

  2. hadoop报错 Message missing required fields: callId, status

    今天群里有人问hadoop的问题,说百度上怎么都查不到,还好hadoop之前玩过一阵,也遇上过这个问题 hadoop-2.2.0  hbase 0.95-hadoop2的 ,hdfs正常 ,启动 hb ...

  3. 淘淘商城_day05_课堂笔记

    今日大纲 学习Redis 使用Redis完成项目中缓存需求 实现商品详情页功能 缓存的需求 大广告位数据无需每次查询后台系统的接口,可以在前台系统添加缓存,提高访问首页的速度. 商品类目的数据也可以缓 ...

  4. MySQL5.5.28启动错误 The server quit without updating PID file

    今天重新安装了一次 MySQL5.5.28 ,但启动的时候老是报错 Starting MySQL.. ERROR! The server quit without updating PID file ...

  5. ZOJ 2710 Two Pipelines

    计算几何+贪心 #include<cstdio> #include<cstring> #include<cmath> #include<algorithm&g ...

  6. 《JS权威指南学习总结--第十一章子集和扩展》

    js子集和扩展:http://www.cnblogs.com/ahthw/p/4298449.html ES6新增let和const关键字:http://www.cnblogs.com/telnetz ...

  7. css3制作导航栏

    <!doctype html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. WCF、Web API、WCF REST、Web Service的区别

    Difference between WCF and Web API and WCF REST and Web Service   The .Net framework has a number of ...

  9. digitalocean完成B轮8300万美元融资，赠送10美元优惠码

    7月8日,美国vps服务商digitalocean在官方博客宣传,公司完成高达8300万美元B轮融资.融资方包括 IA Ventures, Andreessen Horowitz和Access Ind ...

  10. 使 httpClient 支持中文

    一个有效的方法:重载 PostMethod 的 getRequestCharSet 方法 1: class PostChinese { 2: HttpClient httpClient = new H ...