使用JQuery数据模板Handlerbars

在涉及网站前台页面展示时，一般我们会通过Ajax请求获取JSON数据，然后JavaScript拼接HTML的方式进行。这种方法只需要服务器提供一个JSON字串，剩下的工作则由客户端浏览器去完成JavaScript脚本的解析工作，因此页面体验效果好，同时服务器承受的压力相对较很小。但这种方法下代码的可读性却比较差，而且随着陆续添加更复杂的元素，代码的复杂程度还会显著增加。

这种情况下，我们就需要JQuery数据模板，模板解决了一个非常实际的问题：利用模板我们能够以JavaScript对象为数据源，按照设计好的逻辑生成HTML，JQuery数据模板巧妙的将重心移到HTML层，让你用最少的代码得到所需的HTML。

Handlerbars是一个JavaScript语义模板库，很大程度上支持胡子（mustache）模板，即在HTML中夹杂各种模板指令。下载最新的Handlerbars.js 将其加载到引用页面中。

<span style="font-family:SimSun;font-size:14px;"><script type="text/javascript" src="../js/handlebars-v3.0.3.js"></script></span>

<span style="font-family:SimSun;font-size:14px;"><span style="white-space:pre">	</span>// 注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
	var myTemplate = Handlebars.compile($("#table-template").html());
	// 自定义助手，用以截取名称
	Handlebars.registerHelper('show_pro_name', function(pro_name) {
		var ret = pro_name;
		if(pro_name.length > 13)
		{
		    ret = pro_name.substring(0, 13) + "...";
		}
		
		return ret;
	});
	// 将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
	$('#tableList').html(myTemplate(data));
	var myTemplate = Handlebars.compile($("#table-template").html());

<script id="table-template" type="text/x-handlebars-template">
      {{#each this}}
        <tr>
          <td id="{{@index}}"><a href="YProjectDetail.aspx?id={{Id}}&pro_id={{Pro_id}}" target='_blank' >{{show_pro_name Pro_name}}</a><label id="proname{{@index}}"  style="display:none" >{{Pro_name}}</label></td>
          <td>{{Governing_unit}}</td>
          <td style="text-align:right">{{Pro_assets}}</td>          
          <td style="text-align:center">{{Pro_stage}}</td>
          <td style="text-align:center">{{Pro_area}}</td>
          <td style="text-align:center">{{Pro_office}}</td>
        </tr> 
      {{/each}}
</script></span>

Handlerbars包含很多内建助手指令

• #if if/then/else条件指令，对属性求值，若指定属性存在且不是null，则返回true
• #unless @if指令的反指令，若指定属性不存在或者为null，则返回true
• #each 迭代处理对象数组或一个对象的属性，#each助手指令提供了以下几个特殊属性

1. this，返回当前正在处理的对象；
2. @index 若#each指令正在处理一个数组，则@index为当前元素的数组索引；@key 若#each指令正在处理一个对象，则返回当前属性的名字。
3. #with 为模板的一个区块设定上下文。

 

实际应用场景中，这些内建的助手指令可能不能完全满足我们的应用需要，这时我们就可以通过registerHelper来编写自定义助手指令。比如：返回的JSON 字段中name属性可能会比较长，页面展现可能需要我们进行字符串截取，所以我们使用了registerHelper编写了自定义助手指令。

<span style="font-family:SimSun;font-size:14px;">Handlebars.registerHelper('show_pro_name', function(pro_name) {
		var ret = pro_name;
		if(pro_name.length > 13)
		{
		    ret = pro_name.substring(0, 13) + "...";
		}
		
		return ret;
	});</span>

registerHelper方法可接受两个参数：助手指令的名称以及一个函数，当我们在模板中使用这个助手指令时，就会调用该函数。我定义了一个show_pro_name的指令，在模板中调用如下：

<span style="font-family:SimSun;font-size:14px;">{{show_pro_name Pro_name}}</span>