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. React navtive

    http://www.linuxidc.com/Linux/2015-09/123239.htm

  2. Oracle Replace()函数与translate()函数 替换函数

    简要比较: replace 字符串级别的代替 如:SELECT REPLACE('accd','cd','ef') from dual; --> aefd translate 字符级别的代替 如 ...

  3. java文件夹上传下载组件

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  4. 数据库应用之--Redis+mysql实现大量数据的读写，以及高并发

    一.开发背景 在项目开发过程中中遇到了以下三个需求: 1. 多个用户同时上传数据: 2. 数据库需要支持同时读写: 3. 1分钟内存储上万条数据: 根据对Mysql的测试情况,遇到以下问题: 1. 最 ...

  5. P1168 中位数(线段树)

    题目描述 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], A[3], …, A[2k - 1]的中位数.即前1,3,5,……个数的中位数. 输入 ...

  6. 36、将RDD转换为DataFrame

    一.概述 为什么要将RDD转换为DataFrame? 因为这样的话,我们就可以直接针对HDFS等任何可以构建为RDD的数据,使用Spark SQL进行SQL查询了.这个功能是无比强大的. 想象一下,针 ...

  7. mysql 索引基本概念

    1. 什么是索引? 索引是一种数据结构,可以帮助我们快速的进行数据的查找. 2. 索引是个什么样的数据结构呢? 索引的数据结构和具体存储引擎的实现有关, 在MySQL中使用较多的索引有Hash索引,B ...

  8. Linux 文件系统引起的云盘文件系统异常导致 MySQL 数据页损坏事故恢复复盘

    事故的起因是因为当我访问某个数据库的某个表的时候,MySQL 立即出现崩溃并且去查看 MySQL 的错误日志出现类似信息 --09T05::.232564Z [ERROR] InnoDB: Space ...

  9. python中is 和== 比较的区别？

    is 比较两个对象的内存地址是否相同, == 比较连个对象的数据是否相等

  10. Linux 修改时区的办法

    Linux修改时区的正确方法 CentOS和Ubuntu的时区文件是/etc/localtime,但是在CentOS7以后localtime以及变成了一个链接文件 [root@centos7 ~]# ...