<!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. Android（java）学习笔记141：SQLiteDatabase的query方法参数分析

    public Cursor query (boolean distinct, String table, String[] columns, String selection, String[] se ...

  2. 转：通过API获取和创建 Oracle GL Account Code Combination ID’s (CCID’s)的几种方法汇总

    1] FND_FLEX_EXT.GET_COMBINATION_ID: This API Finds combination_id for given set of key flexfield seg ...

  3. pageContext.request.contextPath

    jsp:<c:set var="ctxStatic" value="${pageContext.request.contextPath}"/>嵌套d ...

  4. ORACLE 11g R2数据库安装硬件环境要求

    物理内存要求:最小1G,在windows7,windows8,windows8.1上最小2G. 虚拟内存(或分页空间)容量要求: Available RAM Swap Space Required B ...

  5. UIView转场动画属性设置

    常规动画属性设置(可以同时选择多个进行设置) UIViewAnimationOptionLayoutSubviews:动画过程中保证子视图跟随运动. UIViewAnimationOptionAllo ...

  6. html-----012---颜色的改变

    颜色由红色.绿色.蓝色混合而成. 颜色值 颜色由一个十六进制符号来定义,这个符号由红色.绿色和蓝色的值组成(RGB). 每种颜色的最小值是0(十六进制:#00).最大值是255(十六进制:#FF). ...

  7. 类库探源——System.Drawing.Bitmap

    一.System.Drawing.Bitmap Bitmap 类: 封装GDI+ 位图,此位图由图形图像及其属性的像素数据组成.Bitmap 是用于处理由像素定义的图像的对象 命名空间: System ...

  8. js判断主流浏览器类型和版本号

    如今的互联网中,浏览器可以说是太多太多了,但是大部分都是换壳不换心,基本上主流的浏览器还是火狐,谷歌,IE,safrai这几种比较常见,所以在我们的开发中,有时候需要遇到判断用户正在使用什么浏览器以及 ...

  9. 带缓冲的IO和不带缓冲的IO

    文件描述符: 文件描述符是一个小的非负整数,是内核用来标识特定进程正在访问的文件 标准输入/输出/出错: shell为每个程序打开了三个文件描述符,STDIN_FILEON,STDOUT_FILEON ...

  10. python 自动化之路 day 08_2 网络编程

    本节内容 Socket介绍 Socket参数介绍 基本Socket实例 Socket实现多连接处理 通过Socket实现简单SSH 通过Socket实现文件传送 作业:开发一个支持多用户在线的FTP程 ...