handlerbars

[ajax+json+Handlebars]替代[vo+el表达式]
首先，java有几种对象(PO,VO,DAO,BO,POJO)   
   一、PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象。使用Hibernate来生成PO是不错的选择。 
   二、VO:value object值对象,说白了就是javabean。通常用于业务层之间的数据传递,PO只能用在数据层,VO用在商业逻辑层和表示层.
利用el表达式生成html代码，这是一个在服务器端执行的动作，在服务器端解析完成之后，
才发送到客户端浏览器上，这样做会占用大量服务器资源，而且速度缓慢。


el表达式构造html优点是能够保持html原有格式，js构造html优点是速度快省资源，
为什么我们不能把二者的优点结合在一起呢？这就是Handlebars.js。
Handlebars.js是一款基于Jquery的插件，以json对象为数据源，支持逻辑判断、循环等操作，
同时具有非常好的扩展性，体积60KB左右，经过小菜仔细的分析研究，这是一款不可多得的js模版引擎。


 1)引入插件

<span style="font-size:14px;"> <script type="text/javascript" src="script/jquery.js"></script>
 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script></span>

2）固定写法，将数据引入模板

<span style="font-size:14px;"> var myTemplate = Handlerbars.compile($("#table_temp").html());
 $("#table_list").html(myTemplate(data));</span>

3）模板中遍历集合 each

<span style="font-size:14px;"> <table class="current font" width="100%">
{{#each data.list}}
	<tr>
		<td align="left" style="width:50% !important;">{{userName}}<br>{{transFormatDate addTime}}</td>
		<td align="right" style="width:50% !important;">{{moneyFormat money}}元<br/>
			<#if tenderType = 0>网站投标
	    	<#elseif tenderType = 1>自动投标
	    	<#elseif tenderType = 2>手机投标
	    	</#if>
	    </td>
	</tr>					
{{/each}}
</table></span>

 4) 判断相等或者不相等 ，大于或者小于  ，这些函数handlebars,并没有提供，只能通过自定义，可参考transFormatJson.js文件来看，equal  inequality这两个方法也是在其中定义的，因为 Handlebars提供了一个帮助方法Handlebars.registerHelper（）

//判断相等
Handlebars.registerHelper("equal",function(v1,v2,options){
   if(v1 == v2){
     //满足添加继续执行
     return options.fn(this);
   }else{
     //不满足条件执行{{else}}部分
     return options.inverse(this);
  }
});

使用方法如下：  {{#equal type 1}} //判断type是否为1

 
5) 

<span style="font-size:14px;">require.async('/plugins/handlebars-v1.3.0/handlebars-v1.3.0.js',function(){
          require.async('/plugins/handlebars-v1.3.0/transFormatJson',function(){
            var tpl = require('../../tpl/member/subsidy_log.tpl?_t=1454034099');
            var template = Handlebars.compile(tpl);
            var html = template(json);
            $('#myInvest_table').html(html);
          });
        });</span>

 6）在表格中使用<td>{{addOne @index}}</td>设置当前行的索引，也可以根据它得到当前记录，
 {{@index}}获取当前行的索引，addOne是在helper中注册的到一个方法，目的是将索引加1，默认从1开始计数。