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. getchar（）函数举例

    #include<stdio.h>void main(){ char ch; ch=getchar(); printf("%c",ch);}

  2. HiveQL Index 索引

    Hive只有有限的索引功能.Hive中没有普通关系型数据库中键的概念,但是还是可以对一些字段建立索引来加速某些操作.一张表的索引数据存储在另外一张表中. 通过explain命令可以查看某个查询语句是否 ...

  3. Kubernetes 学习17 dashboard认证及分级授权

    一.概述 1.我们前面介绍了kubernetes的两个东西,认证和授权 2.在kubernetes中我们对API server的一次访问大概会包含哪些信息?简单来讲它是restfule风格接口,也就是 ...

  4. 洛谷 P1807 最长路_NOI导刊2010提高（07） 题解

    P1807 最长路_NOI导刊2010提高(07) 题目描述 设G为有n个顶点的有向无环图,G中各顶点的编号为1到n,且当为G中的一条边时有i < j.设w(i,j)为边的长度,请设计算法,计算 ...

  5. 【概率论】6-1:大样本介绍(Large Random Samples Introduction)

    title: [概率论]6-1:大样本介绍(Large Random Samples Introduction) categories: - Mathematic - Probability keyw ...

  6. RabbitMQ入门学习系列(五) Exchange的Direct类型

    快速阅读 利用Exchange的Direct类型,实现对队列的过滤,消费者启动以后,输入相应的key值,攻取该key值对应的在队列中的消息 . 从一节知道Exchange有四种类型 Direct,To ...

  7. DB2通过某列分组来去重

    DB2通过某列分组来去重,可防止distinct对大字段的去重报错. row_number() OVER (PARTITION BY COL1 ORDER BY COL2) 表示根据COL1分组,在分 ...

  8. com.ibm.db2.jcc.am.SqlSyntaxErrorException: DB2 SQL Error: SQLCODE=-418, SQLSTATE=42610, SQLERRMC=null

    写了一条sql,在db2数据库中可以执行,但是转换成mybatis的mapper文件后,在执行排序操作时报该错误. 我排序是这样写的 <if test="orderStr != nul ...

  9. Android 开发常用工具合集

    在 Android 开发中经常使用到的小功能,用于记录开发的那些事^_^ 1. 获取 release 和 debug 版本的 SHA1 public static String getSHA1(Con ...

  10. Java上传视频（mencoder）

    页面: 上传文件时的关键词:enctype="multipart/form-data" <%@ page language="java" import=& ...