underscore demo

时间：2022-01-13 23:09:31
 <!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&amp&semi;React的前端组件化，顺带补齐React的demo

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

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

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

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

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

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

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

  6. MVVM与Backbone demo

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

  7. underscore源码解析 &lpar;转载&rpar;

    转载出自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. ActionBar官方教程&lpar;7&rpar;自定义操作项的view&comma;如何得到它及处理它的事件

    Adding an Action View An action view is a widget that appears in the action bar as a substitute for ...

  2. 常用CDN公共库

    Jquery <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></scrip ...

  3. dropdownlist绑定和选中

    最近在使用dropdownlist控件,对于这个控件,目前我知道的会使用两种方式去绑定数据,现在将这两种方式分享给大家: 现在是后台数据绑定 protected void BindCarID() { ...

  4. 4G最快网速相当于30M宽带

    [导读]据北京移动方面介绍,目前其4G网络的覆盖范围包括:东西北三环.南至两广路以内的地区:清华北大.国贸CBD及园博会等地区. 在4G年内发牌已成定局的背景下,各运营商都在加快布局,北京移动近期就推 ...

  5. python 数据类型之集合

    一.集合的定义: 定义:由不同元素组成的集合,集合中是一组无序排列的可hash值,可以作为字典的key. 特性:集合的目的是将不同的值存放到一起,不同的集合间用来做关系运算,无需纠结于集合中单个值 二 ...

  6. &num;0 scrapy爬虫学习中遇到的坑记录

    python 基础学习中对于scrapy的使用遇到了一些问题. 首先进行的是对Amazon.cn的检索结果页进行爬取,很顺利,无碍. 下一个目标是对baidu的搜索结果进行爬取 1,反爬虫 1.1 我 ...

  7. 常见的JDBC驱动程序名称和数据库URL

    RDBMS                                                                              JDBC驱动程序名称        ...

  8. MongoDB pymongo模块 删除数据

    使用user集合,删除user集合的数据 import pymongo mongo_client = pymongo.MongoClient( host='192.168.0.112', port=2 ...

  9. Python基础线程和协程

    线程: 优点:共享内存,IO操作时,创造并发操作 缺点:枪战资源 线程不是越多越好,具体案例具体分析,请求上下文切换耗时 IO密集型适用于线程,IO操作打开文件网络通讯类,不需要占用CPU,只是由CP ...

  10. groovy Date 格式化

    刚开始使用Java,瞬间爱上:换了个厂接触到了groovy,开始有点嫌弃Java了... 看看时间的格式化 java玩法: new SimpleDateFormat("yyyy-MM-dd ...

相关文章