<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8"/>

     <meta name="viewport" content="width=device-width"/>

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

     <script src="underscore.js"></script>

 </head>

 <body>

     <!-- 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>

     <!-- data -->

     <script>

         var datas = [{

                 title: "1942",

                 url: "http://www.baidu.com",

                 film: "film1"

             },{

                 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>

 </body>

 </html>

underscore demo的更多相关文章

  1. underscore中template的使用Demo

    在客户端渲染数据时,一般可通过underscore中的template对数据模板进行渲染,例如: 定义模板,需要把type类型设置为“text/template” <script type=&q ...

  2. 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  3. 谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  4. 用backbone实现的一个MVC的小demo

    一.Apache配置 本实例需要使用php支持.要现在Apache中配置虚拟目录,在Apache下的httpd-vhosts.conf文件中添加如下代码 <VirtualHost *:80> ...

  5. 一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考

    事情是如何发生的 最近干了件事情,发现了 underscore 源码的一个 bug.这件事本身并没有什么可说的,但是过程值得我们深思,记录如下,各位看官仁者见仁智者见智. 平时有浏览园区首页文章的习惯 ...

  6. MVVM与Backbone demo

    MVVM https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel

  7. underscore源码解析 (转载)

    转载出自http://www.cnblogs.com/human/p/3273616.html (function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.j ...

  8. 【初探Underscore】再说模版引擎

    前言 Underscore 是一个JavaScript实用库,提供了类似Prototype.js (或 Ruby)的一些功能,但是没有扩展任何JavaScript内置对象. 它弥补了部分jQuery没 ...

  9. underscore源码解析

    (function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.js中表示global对象 var root = this; // 保存"_" ...

随机推荐

  1. 删除sd卡的文件

    public static void deleteAllFile(){ String path = Environment.getExternalStorageDirectory().getAbsol ...

  2. oracle ebs中并发程序定义查询sql

    ---concurrent program define SELECT FCPV.CONCURRENT_PROGRAM_ID, FCPV.CONCURRENT_PROGRAM_NAME, FCPV.U ...

  3. Ubuntu14.04 固定IP

    Ubuntu 固定IP 1. 更改/etc/network/interfaces的内容 1.1 注释掉原来的内容 1.2 添加以下内容 auto eth0 iface eth0 inet static ...

  4. 九度 1371 最小的K个数

    题目描述:输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 输入: 每个测试案例包括2行:第一行为2个整数n,k(1<= ...

  5. 安卓百度地图开发so文件引用失败问题研究

    博客: 安卓之家 微博: 追风917 CSDN: 蒋朋的家 简书: 追风917 博客园: 追风917 # 问题 首先,下面的问题基本都是在Android Studio下使用不当导致,eclipse是百 ...

  6. SQL SERVER语句汇总

    1.查询数据库中所有用户表名:用户表总数. select name from dbo.sysobjects where OBJECTPROPERTY(id,N'IsUserTable')=1 sele ...

  7. Java Web应用启动间隔执行的程序

    Reference:<Java定时器timer.schedule在Web中间隔执行任务和定时><[Java]Timer和TimerTask详解> 做了一个Demo,完成如下的功 ...

  8. 企业级搜索引擎Solr使用入门指南

    由于搜索引擎功能在门户社区中对提高用户体验有着重在门户社区中涉及大量需要搜索引擎的功能需求,目前在实现搜索引擎的方案上有集中方案可供选择: 基于Lucene自己进行封装实现站内搜索. 工作量及扩展性都 ...

  9. OS X环境下SVN回滚工程到指定版本，回滚指定文件到指定版本

    1.打开命令行终端 2.cd + 工程或文件目录 3.svn update 工程目录或文件目录 -r 版本号 在Xcode中选中文件,右键选择''show in finder''(也可以用快捷键,不过 ...

  10. 将数据库二进制图片导出显示到EPPlus Excel2007中

    1.EPPlus Excel 控件可以参考我的另一篇博客:http://blog.163.com/pei_huiping/blog/static/206573067201281810549984/ 这 ...