Underscore是一个非常实用的JavaScript库，提供许多编程时需要的功能的支持，他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能。

　　无论你写一段小的js代码，还是写一个大型的HTML5应用，underscore都能帮上忙。目前，underscore已经被广泛使用，例如，backbone.js唯一强依赖的库就是underscore.js。

　　Underscore.js学习资源：

　　Underscore.js 官网：http://underscorejs.org/#each　　

　　Underscore.js 中文文档: http://www.css88.com/doc/underscore/　

今天主要讨论Underscore 的前端模板功能。它的模板功能和前一篇介绍的javascript前端模板是一样的。对数据的处理更加方便。写了个小例，供大家参考学习。

完整实例可以通过这个网址下载：http://pan.baidu.com/share/link?shareid=2509652039&uk=688556984

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Underscore</title>

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="format-detection" content="telephone=no"/>

    <link href="index.css" rel="stylesheet" type="text/css" />

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

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

</head>

<body>

</body>

</html>

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

<!--数据 -->

    <script>

        var datas = [

            {

                title: "一九四二",

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

                film:"电影1"

            },

            {

                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

Underscore.js 的模板功能的更多相关文章

  1. Underscore.js 的模板功能介绍与应用

    Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能,需要了解的朋友可以详细参考下   U ...

  2. underscore.js中模板函数应用

    一.使用技术要点 (1)使用zepto.js的ajax请求; (2)使用underscore.js的_.template设定模板,模板一般以<script type="text/tem ...

  3. underscore.js定义模板遇到问题：Uncaught TypeError: Cannot read property 'replace' of undefined

    代码正确缩进位置如下, extend "layout" block 'content',-> div ->'nihao' script id:"Invoice ...

  4. 学习在requirejs下如何使用underscore.js模板

    近期在学习underscore.js 这个小而美的js库,是前端 MVC 框架backbone依赖库,他的模板方法主要应用场景是ajax交互过程到页面需要大量的字符串拼接,这部分如果一旦不够仔细就很容 ...

  5. HiShop2.x版本中的上传插件分析，得出所用的模板语言为Underscore.js 1.6.0且自己已修改

    效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popb ...

  6. 模板引擎原理及underscore.js使用

    为什么要使用模板引擎 DOM结构简单,完全可以使用DOM方法创建DOM树.$("<td></td").appendTo(); 当页面比较复杂的时候,下面的程序中红 ...

  7. Underscore.js使用

    Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象. 他解决了这个问题:"如果我面对一个空白的 ...

  8. （2）Underscore.js常用方法

    目录 1.集合相关方法        1.1.数组的处理                map(循环,有返回值),将返回的值依次存入一个新的数组                each(循环,无返回值 ...

  9. Underscore.js 初探

    一. 简介   Underscore 这个单词的意思是“下划线”.   Underscore.js 是一个 JavaScript 工具库,提供了一整套的辅助方法供你使用.   Think that - ...

随机推荐

  1. grep命令选项

    -c:只输出匹配行的计数. -I:不区分大 小写(只适用于单字符). -h:查询多文件时不显示文件名. -l:查询多文件时只输出包含匹配字符的文件名. -n:显示匹配行及 行号. -s:不显示不存在或 ...

  2. learning java Cloneable

    class Address{ String Detail; public Address(String detail){ this.Detail = detail; } } class User im ...

  3. Unity 绘制Mesh线条

    using UnityEngine; using System.Collections; using System.Collections.Generic;   public struct Segme ...

  4. Out of memory: Kill process 6033 (mysqld) score 85 or sacrifice child

    进入正题前先说明:OOM killer什么时候出现? linux下允许程序申请比系统可用内存更多的内存,这个特性叫Overcommit.这样做是出于优化系统考虑,因为不是所有的程序申请了内存就立刻使用 ...

  5. ROS里程计的学习

    采用增量式编码器来实现odometry的计算,首先采用编码器对脉冲进行采样实现左右轮运动状态的获取,然后再利用增量式测程法得到机器人车体当前坐标系的位姿. 增量式测量法是使用从编码器采样到的数据并依据 ...

  6. BAT 按文件修改日期自动建立日期文件夹并移动

    @ECHO OFF&setlocal enabledelayedexpansion@rem 第二行的路径可以改成源目录路径,然后将BAT放源目录外执行.否则这个BAT文件也会被分类.@rem ...

  7. ＂中国东信杯＂广西大学第二届程序设计竞赛 - H - Antinomy与伊尔美格

    题意:给一个有向图,n个点m条边,每个点有点权xi.规定从u点出发,到指定的k个点之一结束,可以多次经过同一个点和同一条边,求路径上点权和的最大值. 题解:直接缩点变成DAG,然后dp的时候并不是直接 ...

  8. html转图片/html2canvas的使用/星座测试/类似于损友圈的活动

    https://try.fishqc.com/Activity/constellation ---成品 电脑上录的gif 有借鉴的链接,很多,下面这个还不错~先别看,尊重下我先~~~~ https:/ ...

  9. springMvc---WebMvcConfigurationSupport

    该类提供了主要的 MVC 配置方法,通过直接继承 WebMvcConfiguration ,并在继承类上 加上 @EnableWebMvc 和 @Configuration 注解之后.便可以在子类中实 ...

  10. Python中单引号和双引号的作用

    一.单引号和双引号 在Python中我们都知道单引号和双引号都可以用来表示一个字符串,比如 str1 = 'python' str2 = "python" str1和str2是没有 ...