<!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. 对ContentProvider中getType方法的一点理解

    在上篇博客中我们介绍了自定义ContentProvider,但是遗漏掉了一个方法,那就是getType,自定义ContentProvider一般用不上getType方法,但我们还是一起来探究下这个方法 ...

  2. 转：maven报错非法字符：\65279 错误

    开发中一个项目很早就报这个错,maven报错非法字符:\65279 错误,今天终于忍无可忍要解决它 :编译java文件的时候,有些java文件报非法字符 \65279错误,在网上找和很多 方法,也试了 ...

  3. JUnit4 笔记

    1. JUnit4基础 JUnit4 与 JUnit3不同的是,不需要继承测试类,而是通过JDK5提供的注解去标识测试方法. 常用的注解如下: @Before:初始化方法 对于每一个测试方法都要执行一 ...

  4. sql: 生日三个月内有效

    DECLARE @birthday datetime,@stat datetime,@end datetime,@statbirthday datetime,@endbirthday datetime ...

  5. php常用正则表达式函数

    执行一个正则表达式匹配: preg_match($pattern, $subject, [array &$matches]); 最多匹配一次,返回值0或1,把第一次匹配到的结果放入$match ...

  6. ios objection

    给大家介绍个不错的团队开发模块化工具objection 1. setup<这里我只介绍ios相关> rake artifact:ios cp -R build/Release-iphone ...

  7. oc ios 中文字符串 进行 sha1加密 错误?

    我在网上找到了一个oc版加密的工具类,但是加密中文就出现大问题 const char *cstr = [self cStringUsingEncoding:encoding]; NSData *dat ...

  8. UIImagePickerController显示中文界面

    iOS开发中,我们经常遇到获取拍照.相册中图片的功能,就必然少不了UIImagePickerController,但是我们发现当我们使用它的时候,它的页面是英文的,看着很别扭,国人还是比较喜欢看中文界 ...

  9. JS实现回到页面顶部动画效果 2016.03.23

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...

  10. thinkphp 模板中赋值

    在项目开发的时候,有时候希望直接在模板中调用 一些自定义方法,或者内置方法来,处理获得一些数据,并且赋值给一个变量给后面调用,这个时候如果用原生Php 的方式调用如下:<?php $abc = ...