欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

underscore 模版使用

程序员文章站 2022-06-03 12:22:22
...

官网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标签过滤,将相关的字符如"<"转为"&lt;",比如

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