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. SSM自测错题解析

    试题解析:spring 中bean的作用域有:singleton.session.prototype.request.global Session 试题解析:使用import导入子元素需要用prope ...

  2. RabbitMQ交换机、RabbitMQ整合springCloud

    目标 1.交换机 2.RabbitMQ整合springCloud 交换机 蓝色区域===生产者 红色区域===Server:又称Broker,接受客户端的连接,实现AMQP实体服务 绿色区域===消费 ...

  3. 使用socket.io实现多房间通信聊天室

    websocket的实现有很多种,像ws和socket.io,这里使用的是socket.io来实现多房间的效果. 这里的使用没有使用socket.io官方提供的namespace和room,而是完全通 ...

  4. 鼠标经过提高层级案例（margin，相对定位，z-index）

    <body> <ul> <li class="box1">1</li> <li class="box2"& ...

  5. cs 与 bs 架构

    C/S和B/S各有优势,C/S在图形的表现能力上以及运行的速度上肯定是强于B/S模式的,不过缺点就是他需要运行专门的客户端,而且更重要的是它不能跨平台,用c++在windows下写的程序肯定是不能在l ...

  6. BufferedReader和BufferedWriter简介

    BufferedReader和BufferedWriter简介 为了提高字符流读写的效率,引入了缓冲机制,进行字符批量的读写,提高了单个字符读写的效率.BufferedReader用于加快读取字符的速 ...

  7. CRMEB中因为重写规则导致的服务器异常和404之解决办法

    问题描述:安装CRMEB后,只能通过https://域名//index.php/admin访问到后台,而不能直接通过https://域名/admin访问到后台,以至于导致进入系统后台出现有的功能界面可 ...

  8. JavaWeb之Tomcat(2) —— Tomcat的使用

    1. 启动和关闭Tomcat (1) 打开Tomcat的安装目录,在 bin 目录下,有四个文件: startup.bat 和 startup.sh,他们分别是Windows环境下的批处理文件和Lin ...

  9. 在Ubuntu下安装VWMare tools

    之前随便解压在一个目录下一直不能安装,后来把压缩包解压到home目录下就可以了. 详细步骤:https://jingyan.baidu.com/article/597a0643356fdc312b52 ...

  10. 服务器部署docker

    docker简介 可以把docker是一个容器,可以让开发者将自己的项目部署到这个容器中,最常用的场景是将自己的后端项目部署到服务器的时候会将其打入docker镜像中,可以理解为一个开销更小的虚拟机. ...