underscore 模版使用
官网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
推荐阅读