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标签过滤，将相关的字符如"<"转为"&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