Underscore是一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。它是这个问题的答案:“如果我在一个空白的HTML页面前坐下, 并希望立即开始工作, 我需要什么?“...它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。

Underscore提供了100多个函数,包括常用的: map, filter, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等.

template_.template(templateString, [settings])
将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。
模板函数可以使用
<%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。
如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>
当你要给模板函数赋值的时候,可以传递一个含有与模板对应属性的data对象 。
如果您要写一个一次性的, 您可以传对象 data
作为第二个参数给模板 template 来直接呈现,
这样页面会立即呈现而不是返回一个模板函数.
参数 settings 是一个哈希表包含任何可以覆盖的设置 _.templateSettings.

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b>&lt;script&gt;</b>"

您也可以在JavaScript代码中使用 print. 有时候这会比使用 <%= ... %> 更方便.

var compiled = _.template("<% print('Hello ' + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge"

如果ERB式的分隔符您不喜欢, 您可以改变Underscore的模板设置, 使用别的符号来嵌入代码.定义一个 interpolate 正则表达式来逐字匹配嵌入代码的语句, 如果想插入转义后的HTML代码则需要定义一个 escape 正则表达式来匹配,还有一个 evaluate 正则表达式来匹配您想要直接一次性执行程序而不需要任何返回值的语句.您可以定义或省略这三个的任意一个.例如, 要执行Mustache.js类型的模板:

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

默认的, template 通过 with 语句来取得 data 所有的值. 当然, 您也可以在 variable 设置里指定一个变量名. 这样能显著提升模板的渲染速度.

_.template("Using 'with': <%= data.answer %>", {variable: 'data'})({answer: 'no'});
=> "Using 'with': no"

预编译模板对调试不可重现的错误很有帮助. 这是因为预编译的模板可以提供错误的代码行号和堆栈跟踪, 有些模板在客户端(浏览器)上是不能通过编译的 在编译好的模板函数上, 有 source 属性可以提供简单的预编译功能.

<script>
  JST.project = <%= _.template(jstText).source %>;
</script>

另外自己做了一个常用的demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>UnderscoreDemo</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="jquery.js"></script>
    <script src="../underscore.min.js"></script>
</head>

<body>
</body>
</html>

    <script id="historyTpl" type="text/template">
        <%_.each(response, function(item) {%>
            <div class="historyItem">
                <div class="historyDate"><%=item.date%></div>

                    <%_.each(item.list, function(user) {%>
                       <div class="userItem">
                        <img src="<%=user.icon%>"/><!---->
                        <p><%=user.nick%></p>
                        <p><%=user.prize%>天VIP会员</p>
                      </div>
                    <%});%>

            </div>
        <%});%>
    </script>
<script>
    var response=[{"date":"Today","list":[{"uid":333222,"nick":"kitty","icon":"333.png","prize":30}]},{"date":"Yesterday","list":[{"uid":100077,"nick":"hello","icon":"333.png","prize":30}]},{"date":"2015-05-12","list":[{"uid":100077,"nick":"zealer9999","icon":"333.png","prize":30},{"uid":100034,"nick":"100034","icon":"333.png","prize":30}]}];
    $("body").html( _.template($("#historyTpl").html(), response));
</script>

underscorejs的更多相关文章

  1. 使用requireJS,backboneJS,和underscoreJS完成自定义模板封装

    使用requireJS,backboneJS,和underscoreJS完成自定义模板封装 原来的代码 当我们进行一个列表的数据填充的时候,是这样做的: //获取美食列表 function getFo ...

  2. 不学就吃亏的underscorejs类库学习示例 ——(集合篇)

    underscorejs是一个很不错的类库,我的很多项目都引用了这个类库,的确可以带来很多方便. 记得我当初学的时候,看underscorejs的api是看的一知半解的,甚至不明白api里的conte ...

  3. underscorejs 源码走读笔记

    Underscore 简介 Underscore 是一个JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象.它弥补了部分jQuery ...

  4. underscoreJS的Collections 的API

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Underscore.js

    概述 Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库 ...

  6. 【原】移动web资源整理

    2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快——低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一——兼容问题多 网络更复杂——弱网络,页面打开慢 低端机性能 ...

  7. 我们是怎么管理QQ群的

    文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以 ...

  8. 移动web资源整理

    [原]移动web资源整理 2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快--低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一--兼容问题多 网络更复杂--弱网 ...

  9. Worktile 技术架构概要

    其实早就该写这篇博客了,一直说忙于工作没有时间,其实时间挤挤总会有的,可能就是因为懒吧!从2013年11月一直拖到现在,今天就简单谈谈 Worktile 的技术架构吧 . Worktile 自上线到现 ...

随机推荐

  1. java合集框架第一天

    文章目录 1 collection接口 2  list接口 3 Iterator 4 Vertor 5  ArrayList 6 LinkedList 主体部分: (1)collection Java ...

  2. [原][C#][winForm]分级基金折溢价WinForm网络计算器

    分级基金折溢价WinForm网络计算器 通过子/母基金代码,从 [ 东方财富网,天天基金网,新浪 ] 抓取分级基金的子母基金数据(代码,名称,净值,价格), 并计算出子基金(A基金,B基金)以及母基金 ...

  3. SQL基础篇----select语句与排序问题

    一.检索--输出所有的列 SELECT * FROM my_friends WHEREfirst_name = 'cake'; 知识点1 * 代表选择出所有的行-----(什么行呢?)就是first_ ...

  4. 详解struts.multipart.saveDir的临时文件路径

    Struts2中的struts.multipart.saveDir主要是用来设置上传文件的临时目录,在不同的配置方式下,它的临时文件目录大有不同,好多人在设置后往往找不到这个临时目录在哪里,下面我就来 ...

  5. Web开发-表单验证

    表单验证是Web开发中必不可少的一个环节,用来限制用户输入数据的规范和一致性.那么如何能够简化这一任务,让开发人员通过简单的属性设置就能达到目的呢? FineUI在这一点上也是下足了功夫,比Asp.N ...

  6. Oracle11g安装完成后给用户解锁

    安装时候你可能忘记给普通用户scott解锁,导致安装成功后普通用户无法登录,那该怎么办呢? 先用system用户登录,登录成功之后就可以给其他用户解锁了. 如图: 同理,如果要锁定某一个用户,只需要把 ...

  7. Dapper inner join

    Dapper中的一些复杂操作和inner join应该注意的坑 上一篇博文中我们快速的介绍了dapper的一些基本CURD操作,也是我们manipulate db不可或缺的最小单元,这一篇我们介绍下相 ...

  8. x86汇编指令具体解释

    80x86指令系统 80x86指令系统,指令按功能可分为下面七个部分. (1) 数据传送指令. (2) 算术运算指令. (3) 逻辑运算指令. (4) 串操作指令. (5) 控制转移指令. (6) 处 ...

  9. python中print,return和yield的区别

    def func1(): for i in range(1, 5): print i def func2(): for i in range(1, 5): return i def func3(): ...

  10. iOS 多线程开发之OperationQueue(二)NSOperation VS GCD

    原创Blog.转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK具体解释专栏 http://blog.csdn.net/column/details/huang ...