使用JQuery数据模板Handlerbars

傷城~ 2022-08-05 04:18 85阅读 0赞

在涉及网站前台页面展示时，一般我们会通过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;"><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的指令，在模板中调用如下：

[Handlerbars.js]: http://handlebarsjs.com/