官网http://underscorejs.org/中介绍:
你可能用到 Prototype.js中提供的一些扩展,而underscore也是这样的javascript扩展的一个工具库,不同的是underscore扩展的不是js固有对象(Array, Date, String...),使用最多的地方就是和backbone(一种前台javascript版的mvc)协作使用。
这里只是简单介绍下underscore的模版使用方法,有好人已经对underscore进行了中文详细的注释,可到链接http://www.iteye.com/topic/1127861处查看下载。
代码中,有个正则配置
_.templateSettings = {
evaluate : /<%([\s\S]+?)%>/g,
interpolate : /<%=([\s\S]+?)%>/g,
escape : /<%-([\s\S]+?)%>/g
};
跟jsp中嵌入java代码有点像,evaluate标签中间的表示为可执行的js代码,interpolate表示输出一个js运行结果的值,escapte表示输出这个变量的值并且进行html标签过滤,将相关的字符如"<"转为"<",比如
evaluate:如果xxx为true则输出字符串<div>xxx</div>
<%if(xxx){%> <div>xxx</div> <%}%>
interpolate: 输出表达式结果,如果gender为0则返回字符串为<div>女</div>
<div>性别:<%= gender == 0 ? "女" : "男"%></div>
escape: 就是输出这个变量值,如果gender为0则返回字符串为<div>0</div>
<div>性别:<%- gender%></div>
默认的标签使用过程中,可能会造成不便比如jsp中这样的字符串会与java代码冲突,这样我们只修改覆盖默认配置就行,下面就是将"<%%>"替换为“{}”
/** * underscore template settings */ _.templateSettings = { evaluate : /{([\s\S]+?)}/g, interpolate : /{=([\s\S]+?)}/g, escape : /{-([\s\S]+?)}/g };
几个例子:
var tml = "<div class=\"dialog\" role=\"dialog\" {if(id){} id=\"{-id}\"{}}>" + "<div class=\"header\">" + "<span class=\"caption\">{-caption}</span>" + "{if(closable){}" + "<div class=\"button close\"><img src=\"images/close.gif\"/></div>" + "{}}</div>" + "<div class=\"content\"></div>" + "</div>"; tmp = _.template(tml, { id: "dialog1", caption: "title", closable: false} );
输出字符串为:<div class="dialog" role="dialog" id="dialog1"><div class="header"><span class="caption">title</span></div><div class="content"></div></div>
当然也可以使用underscore提供的forEach:
var tml = "<ul id={-id}>" + "{_.forEach(data, function(item, i){}"+ "<li>{-i}:{-item.name}</li>"+ "{})}"+ "</ul>"; tmp = _.template(tml, { id:"students", data:[ {name: "lily", gender: 0}, {name: "lilei", gender: 1}, {name: "jim", genger: 1} ] });
输出字符串结果为:<ul id=students><li>0:lily</li><li>1:lilei</li><li>2:jim</li></ul>
如果只是单纯想使用他的模版,可以把相关代码提出来http://blog.sina.com.cn/s/blog_842a3c1b0101etsn.html
相关推荐
下划线在Express中轻松使用Underscore模板。安装这个软件包在npm中注册为underscore-express ,所以很简单... npm install underscore-express ...会做的。用法在您的Express应用设置中... // To use the default '...
目前,underscore已经被广泛使用,例如,backbone.js唯一强依赖的库就是underscore.js。 今天主要讨论Underscore 的前端模板功能。它的模板功能和前一篇介绍的javascript前端模板是一样的。对数据的处理更加方便。写...
用于Webpack的Underscore.js模板加载器,可在严格模式下使用。 下划线模板默认情况下不使用严格模式,因为它们使用with(data)函数使您可以访问数据变量。 此插件的工作方式是在模板中的每个变量前面加上data....
koa下划线模板 使用Koa渲染模板。 适用于Koa 2.x或更高版本。入门将此软件包添加为您的应用程序的中间件: const views = require ( 'koa-underscore-templates' ) ;app . use ( views ( __dirname + '/views' , { /...
underscore.js 的模板引擎很小但很容易使用。 如果你不想使用整个 underscore.js 库但需要一个小巧、优雅的模板引擎,请考虑这个项目。 如何使用 下载库 包括图书馆 < script type =" application/javascript " ...
用于Webpack的Underscore.js和Lodash模板加载器 变更日志 * 1.1:通过`query`支持宏(thx @ JimYan,@ devlinjunker)* 1.0:Loader现在可与Webpack 4一起使用。 安装 npm install underscore-template-loader ...
Underscore提供了80多个函数,包括常用的: map, select, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能, 强类型相等测试, 等等. 在新的浏览器中, 有许多函数如果浏览器本身直接支持,将会...
节点服务器模板优化的 Express 服务器端基于 Underscore 的模板,使用类似逻辑的合并。Express 3.x 示例 var express = require ( 'express' ) ;var templates = require ( 'node-server-templates' ) ;var app = ...
underscore-partials使您可以使用模板中的模板进行抽象和重用。 例子: <!-- star_rating.tmpl --> < % for (var i = 0; i * < % } % > <!-- main.tmpl --> < h1> < %= product.name % >...
Underscore.js模板编译器 Python实用程序,可将目录中的所有underscore.js模板自动编译为javascript文件。 该脚本不断观察某些模板文件中的更改。 编辑某些模板文件后,脚本会自动将所有模板编译到一个javascript...
#Templito Temp·li·to [temp- lee- toh] (名词)一个小的 underscore.js 模板预编译器。 (名词)模板卷饼。 为 underscore.js 模板生成 javascript 文件。 安装: npm install -g templito 如需快速帮助: ...
Underscore 提供了100多个函数,包括常用的:map、filter、invoke — 当然还有更多专业的辅助函数,如:函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。 微信小程序无法直接使用require( '...
下划线underscore.js模板的命令行预编译。例子给定这样的文件系统: views/ layout.us home/ index.us blah.us admin/ dashboard.us以下命令: underscorec views/ output.js会将四个下划线模板编译到文件output.js...
#ToEat.ly 解答
模板引擎有很多,比较知名的在各回答里也都提及了,而我要说的是一个更根本的问题,怎么样的模板引擎是适合前端的首先说明一点,underscore.template这种东西不叫模板引擎,他还不够格来配上“引擎”这两个字,...
发电机牵线木偶高级应用程序 入门 什么是约曼? 套路问题。 这不是一回事。 是这个人: ...构建这个应用程序结构的基础是从 David Sulc 在他的书“Backbone Marionette js:一个温和的介绍”、“使用 Requir
Underscore 提供了100多个函数,包括常用的:map、filter、invoke — 当然还有更多专业的辅助函数,如:函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。弥补了标准库的不足,大大方便了...
一个微信小程序的上手学习小demo,包括常用组件使用,ajax获取数据,模板使用,路由等,通过一些手段将underscore引入到项目中小程序缺失功能 1 不同环境不同配置(既dev,test,production目前无法判断)未解决问题...
Underscore 提供了100多个函数,包括常用的:map、filter、invoke — 当然还有更多专业的辅助函数,如:函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。 微信小程序无法直接使用require( '...