template.js的使用案例

template.js是一款开源的JavaScript模板引擎，用来渲染页面的

第一步：首页页面引用

<script type="text/javascript" src="js/template.js"></script>

第二步：模板创建

<!-- 模版 -->
<script type="text/html" id="templet">
	{{each object as obj i}}
		 <div class="list-con" onclick="mapp('{{obj.parkid}}','{{obj.parkname}}','frame','{{obj.latitude}}','{{obj.longitude}}')">
   	  		<div class="parking-lot-infor">
   	  			<div class="parkname">{{obj.parkname}}{{obj.actdesc | formatDesc}}</div>
   	  			<div class="parkaddress">{{obj.address}}</div>
   	  			<div class="park-btn">
   	  				<input onclick="record('{{obj.parkid}}','{{obj.parkname}}','{{obj.parkurl}}','free')" type="button" value="缴费">
					{{if obj.findappurl!=''}}
   	  					<input onclick="record('{{obj.parkid}}','{{obj.parkname}}','{{obj.parkurl}}','find')" type="button" value="寻车">
					{{/if}}
   	  			</div>
   	  		</div>
   	  		<div class="parking-fee">{{obj.unitcost | formatCost}}</div>
   	  		<div class="navigation"><img onclick="callMap('{{obj.parkid}}','{{obj.parkname}}','frame','{{obj.latitude}}','{{obj.longitude}}');" src="${ctx }/app/car/park/images/navigation_icon.png"/><br/>{{obj.distance | formatDis}}</div>
  		</div>
	{{/each}}
</script>

第三步：ajax请求数据

var html = WebPlugin.templet($('#templet').html(), jsondata);
				$(".parking-list").append(html);

template.js的模板案例

/*!art-template - Template Engine | http://aui.github.com/artTemplate/*/
!function(){function a(a){return a.replace(t,"").replace(u,",").replace(v,"").replace(w,"").replace(x,"").split(y)}function b(a){return"'"+a.replace(/('|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n")+"'"}function c(c,d){function e(a){return m+=a.split(/\n/).length-1,k&&(a=a.replace(/\s+/g," ").replace(/<!--[\w\W]*?-->/g,"")),a&&(a=s[1]+b(a)+s[2]+"\n"),a}function f(b){var c=m;if(j?b=j(b,d):g&&(b=b.replace(/\n/g,function(){return m++,"$line="+m+";"})),0===b.indexOf("=")){var e=l&&!/^=[=#]/.test(b);if(b=b.replace(/^=[=#]?|[\s;]*$/g,""),e){var f=b.replace(/\s*\([^\)]+\)/,"");n[f]||/^(include|print)$/.test(f)||(b="$escape("+b+")")}else b="$string("+b+")";b=s[1]+b+s[2]}return g&&(b="$line="+c+";"+b),r(a(b),function(a){if(a&&!p[a]){var b;b="print"===a?u:"include"===a?v:n[a]?"$utils."+a:o[a]?"$helpers."+a:"$data."+a,w+=a+"="+b+",",p[a]=!0}}),b+"\n"}var g=d.debug,h=d.openTag,i=d.closeTag,j=d.parser,k=d.compress,l=d.escape,m=1,p={$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1},q="".trim,s=q?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],t=q?"$out+=text;return $out;":"$out.push(text);",u="function(){var text=''.concat.apply('',arguments);"+t+"}",v="function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);"+t+"}",w="'use strict';var $utils=this,$helpers=$utils.$helpers,"+(g?"$line=0,":""),x=s[0],y="return new String("+s[3]+");";r(c.split(h),function(a){a=a.split(i);var b=a[0],c=a[1];1===a.length?x+=e(b):(x+=f(b),c&&(x+=e(c)))});var z=w+x+y;g&&(z="try{"+z+"}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:"+b(c)+".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");try{var A=new Function("$data","$filename",z);return A.prototype=n,A}catch(B){throw B.temp="function anonymous($data,$filename) {"+z+"}",B}}var d=function(a,b){return"string"==typeof b?q(b,{filename:a}):g(a,b)};d.version="3.0.0",d.config=function(a,b){e[a]=b};var e=d.defaults={openTag:"<%",closeTag:"%>",escape:!0,cache:!0,compress:!1,parser:null},f=d.cache={};d.render=function(a,b){return q(a,b)};var g=d.renderFile=function(a,b){var c=d.get(a)||p({filename:a,name:"Render Error",message:"Template not found"});return b?c(b):c};d.get=function(a){var b;if(f[a])b=f[a];else if("object"==typeof document){var c=document.getElementById(a);if(c){var d=(c.value||c.innerHTML).replace(/^\s*|\s*$/g,"");b=q(d,{filename:a})}}return b};var h=function(a,b){return"string"!=typeof a&&(b=typeof a,"number"===b?a+="":a="function"===b?h(a.call(a)):""),a},i={"<":"&#60;",">":"&#62;",'"':"&#34;","'":"&#39;","&":"&#38;"},j=function(a){return i[a]},k=function(a){return h(a).replace(/&(?![\w#]+;)|[<>"']/g,j)},l=Array.isArray||function(a){return"[object Array]"==={}.toString.call(a)},m=function(a,b){var c,d;if(l(a))for(c=0,d=a.length;d>c;c++)b.call(a,a[c],c,a);else for(c in a)b.call(a,a[c],c)},n=d.utils={$helpers:{},$include:g,$string:h,$escape:k,$each:m};d.helper=function(a,b){o[a]=b};var o=d.helpers=n.$helpers;d.onerror=function(a){var b="Template Error\n\n";for(var c in a)b+="<"+c+">\n"+a[c]+"\n\n";"object"==typeof console&&console.error(b)};var p=function(a){return d.onerror(a),function(){return"{Template Error}"}},q=d.compile=function(a,b){function d(c){try{return new i(c,h)+""}catch(d){return b.debug?p(d)():(b.debug=!0,q(a,b)(c))}}b=b||{};for(var g in e)void 0===b[g]&&(b[g]=e[g]);var h=b.filename;try{var i=c(a,b)}catch(j){return j.filename=h||"anonymous",j.name="Syntax Error",p(j)}return d.prototype=i.prototype,d.toString=function(){return i.toString()},h&&b.cache&&(f[h]=d),d},r=n.$each,s="break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",t=/\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g,u=/[^\w$]+/g,v=new RegExp(["\\b"+s.replace(/,/g,"\\b|\\b")+"\\b"].join("|"),"g"),w=/^\d[^,]*|,\d[^,]*/g,x=/^,+|,+$/g,y=/^$|,+/;e.openTag="{{",e.closeTag="}}";var z=function(a,b){var c=b.split(":"),d=c.shift(),e=c.join(":")||"";return e&&(e=", "+e),"$helpers."+d+"("+a+e+")"};e.parser=function(a){a=a.replace(/^\s/,"");var b=a.split(" "),c=b.shift(),e=b.join(" ");switch(c){case"if":a="if("+e+"){";break;case"else":b="if"===b.shift()?" if("+b.join(" ")+")":"",a="}else"+b+"{";break;case"/if":a="}";break;case"each":var f=b[0]||"$data",g=b[1]||"as",h=b[2]||"$value",i=b[3]||"$index",j=h+","+i;"as"!==g&&(f="[]"),a="$each("+f+",function("+j+"){";break;case"/each":a="});";break;case"echo":a="print("+e+");";break;case"print":case"include":a=c+"("+b.join(",")+");";break;default:if(/^\s*\|\s*[\w\$]/.test(e)){var k=!0;0===a.indexOf("#")&&(a=a.substr(1),k=!1);for(var l=0,m=a.split("|"),n=m.length,o=m[l++];n>l;l++)o=z(o,m[l]);a=(k?"=":"=#")+o}else a=d.helpers[c]?"=#"+c+"("+b.join(",")+");":"="+a}return a},"function"==typeof define?define(function(){return d}):"undefined"!=typeof exports?module.exports=d:this.template=d}();
template.config("escape", false);
/**处理换行和空格*/
template.helper('encode', function (str) {
	try{
		if($.trim(str) == ''){
			return str;
		}
		return str.replace(/[\n]/gi, '<br/>').replace(/[ ]/gi, '&nbsp;');
	}catch(e){
		return str;
	}
});
template.map = {};
template.helper('mapGet', function (key, mapName) {
	return template.map[mapName][key + ''];
});


var WebPlugin = {};
/**模板**/
WebPlugin.templet = function(source, obj){
	var render = template.compile(source);
	var html = render(obj);
	return html;
};
WebPlugin.templetFile = function(url, obj, callback){
	$.post(url, {}, function(templet){
		var html = WebPlugin.templet(templet, obj);
		callback(html);
	});
};

template.helper('toChiDate', function (key) {
	if($.trim(key) == ''){
		return ;
	}
	return key.substring(0, 4) + '/' + parseInt(key.substring(5, 7)) + '/' + parseInt(key.substring(8, 10)) + '';
});
template.helper('formatDateAsEasy', function (key) {
	if($.trim(key) == ''){
		return ;
	}
	return formatDateAsEasy(key);
});
template.helper('nvl', function (key, def) {
	if($.trim(key) == ''){
		return def;
	}
	return key;
});

//格式化产品价格
template.helper('formatPrice', function (key, def) {
	if($.trim(key) == ''){
		return ;
	}
	if(finedo.fn.isNotNon(key)){
		var price = new BigDecimal(key+".00").divide(new BigDecimal("100")).setScale(0).toString();
		return price;
	}
});

//格式化图片
template.helper('formatImages', function (key) {
	if($.trim(key) == ''){
		return ;
	}
	if(finedo.fn.isNotNon(key)){
		var imageid = key.split(",");/* 附件图片 */
		for(var k=0;k<imageid.length;k++){
			var fileid = imageid[k].split("/")[1].split(".")[0];
			return fileid;
		}
	}
});
//格式化订单号
template.helper('formatDesc', function (key) {
	var html="";
	if($.trim(key) == ''){
		return ;
	}
	if(finedo.fn.isNotNon(key)){
		if(key.indexOf(":") != -1){//至少两种活动
			var list=key.split(":");
			for (var i = 0; i < list.length; i++) {
				if(list[i]=="推荐"){
					html += '<span class="recommend">推荐</span>';
				}else if(list[i]=="优惠"){
					html += '<span class="discount">优惠</span>';
				}else{
					html+='<span class="green">'+list[i]+'</span>';
				}
			}
		}else {
			if(key=="推荐"){
				html += '<span class="recommend">推荐</span>';
			}else if(key=="优惠"){
				html += '<span class="discount">优惠</span>';
			}else{
				html+='<span class="green">'+key+'</span>';
			}
		}
		
		return html;
	}
});
//图标名称格式化
template.helper('formatCost', function (key) {
	if($.trim(key) == ''){
		return ;
	}
		return key+"元/小时";
});
//格式化距离
template.helper('formatDis', function (key) {
	if($.trim(key) == ''){
		return ;
	}
	if(finedo.fn.isNotNon(key)){
		if(parseInt(key)>1000){
			var dis=key/1000;
			return dis.toFixed(2)+"km";
		} else{
			return key+"m";
		}
	}
});
function formatDateAsEasy(key){
	return key.substring(10,16);
}