<!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. windows 下 node 多版本管理工具 - gnvm

    最近写了各个构建工具, 开发环境为mac,需要在windows下测试通过: 因为很久不用windows,windows下的node 版本还是 0.10.* 的,因此决定升级node mac 下我使用的 ...

  2. OpenJDK1.8 安装

    1. 安装JDK yum install -y java-1.8.0-openjdk-devel 2. 设置环境变量 /etc/profile文件增加 export JAVA_HOME=/usr/li ...

  3. 基于u盘安装centos6.0

    本人在dell笔记本上尝试安装centos6.0,与win7形成双系统,安装过程如下: 1.使用ultraliso制作u盘启动盘,启动盘以centos6.0的映像文件为源头制作: 2.制作完成后,删除 ...

  4. Android的Manifest配置文件介绍

    一.关于AndroidManifest.xml       AndroidManifest.xml 是每个android程序中必须的文件.它位于整个项目的根目录,描述了package中暴露的组件(ac ...

  5. VS 2013 编译和使用 Boost

    以 1.58.0 版本 boost 为例, 当前系统版本为 Windows 8.1 x64   1 编译boost  当前解压路径 "D:\Libraries\boost_1_58_0&qu ...

  6. [ lucene高级 ] 研讨如何进行Lucene的分布式应用

    http://www.cnblogs.com/huangfox/archive/2010/10/15/1852206.html Lucene是个高度优化的倒转索引搜索引擎.它将倒转的索引存储在定制的文 ...

  7. PHPSession-完全PHP5之session篇

    http://blog.csdn.net/masterft/article/details/1640122 1.什么是session?       Session的中文译名叫做“会话”,其本来的含义是 ...

  8. PHP简单MVC架构

    http://blog.csdn.net/haiqiao_2010/article/details/12166283 由于需要搭建一个简单的框架来进行API接口开发,所以简单的mvc框架当然是首选.最 ...

  9. 周末充电之WPF（二 ） .窗口的布局

    登录窗口布局:[ Grid 布局 -Grid.RowDefinitions / Grid.ColumnDefinitions] 代码如下: <Window x:Class="login ...

  10. 享元模式（咖啡屋）【java与模式】

    package com.javapatterns.flyweight.coffeeshop; public class Flavor extends Order { private String fl ...