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. asp.net MVC 使用wifidog 协议实现wifi认证

    在网上看到的很多实现的wifidog 协议一般都是PHP 的,了解一下PHP 但是比较喜欢.net ,所以实现了简单的一个进行登录认证的功能 (好多协议中的功能目前没有实现) 1. 开发环境(vs20 ...

  2. pcl-设置多线段宽度和颜色

    显示点云有使用vtk的,有使用 ros 中riz ?库的,使用pcl显示点云数据比较方便,但是对于一些模型形状只能固定特定的效果,比如说直线段,只能绘制点到点两点之间的线段.但是项目需要绘制点1到点2 ...

  3. 【概率论】6-4:分布连续性修正(The Correction for Continuity)

    title: [概率论]6-4:分布连续性修正(The Correction for Continuity) categories: - Mathematic - Probability keywor ...

  4. 29、Java虚拟机垃圾回收调优

    一.背景 如果在持久化RDD的时候,持久化了大量的数据,那么Java虚拟机的垃圾回收就可能成为一个性能瓶颈.因为Java虚拟机会定期进行垃圾回收,此时就会追踪所有的java对象, 并且在垃圾回收时,找 ...

  5. 洛谷P2324 [SCOI2005] 骑士精神

    题目 方法很多,最经典的是用搜索的算法,也就是\(IDA*\)算法搜索. \(IDA*\)算法是每次规定一个搜索深度,并在搜索的时候限制该搜索深度,从而达到把深搜的优点和广搜的优点结合起来优化时间的一 ...

  6. python中range语法

    规则:一般不取最后一位 start: 计数从 start 开始.默认是从 0 开始.例如range(5)等价于range(0, 5); stop: 计数到 stop 结束,但不包括 stop.例如:r ...

  7. Luogu5349 幂

    题面 题解 首先考虑对于一个单项式怎么做,多项式就是单项式的答案的和. 就求一下\(\mathbf f(n) = n^k\)吧.(下面设\(t = \dfrac 1r\)) 设\(\mathbf S_ ...

  8. SQL查询语句可以执行，但是提示对象名无效

    类似于缓存的问题,ctrl+shift+R 刷新下 一般就好了

  9. [电脑]拆解DELL 2007FPb液晶显示器

    最近修了不少三星214T显示器,拆卸很方便,多数更换电容就OK了.但有一台出现了花屏,怀疑是数码板出问题了.单位有台显示屏破碎的DELL2007FPb,拆了看看能否借用数码板. 图片:IMG_2063 ...

  10. JVM 初始化阶段例子

    创建如下Demo package com.example.jvm.classloader; class Parent{ static int a = 3; static { System.out.pr ...