Jquery-template的使用

之前的项目中用到了jquery-template这东西，这里做一下记录，以免遗忘。

个人理解，Jquery-template是一个jquery的插件，作用是定义一个html的模板，将一串类似的数据使用模板的样式，添加到html页面的指定位置。

最开始，我在页面中使用ajax获取了一些数据，然后解析这些数据，并手动生成html内容，添加到一个<div>范围内。然而这种做法实在是太笨太丑了，需要不停地append字符串，累赘而不美观，写起来也累。因为是要生成一个table，事实上table中每一行都是类似的，只是数据不同，所以可以使用Jquery-template来定义一个<tr>模板，然后将所有的数据，按照模板的格式、样式添加到指定的<table>。

使用方式

建立一个模板

1
2
3

<script type="text/html" id="template">
    <tr><td data-content="name" data-format="AddAHrefToDiv"></td><td data-content="doc" data-format="fromMarkDown"></td></tr>
</script>

这个模板就是一个列表行，每一行有两列，data-content表示数据来源，data-format表示显示格式。

定义数据

1
2
3

var service = {};
service['name'] = $(this).attr('name');
service['doc'] = $(this).children('meta').children('version').text();

可以看到name和doc两个key跟上面模板中的data-content相互对应。

加载到指定位置

$("#target").loadTemplate($('#template'), service);

这样就完成..一半了。如果你在模板中不指定data-format的话，这样就已经可以用了。如果指定了，那么还有一个步骤。

定义数据格式

$.addTemplateFormatter({
  
  AddAHrefToDiv : function(value, template){
    if(value.substring(0,1) == '~'){
      return "<a href='method.jsp?serviceName=" + serviceName + "&methodName=" + value.substring(1) + "'>" + value.substring(1) + "</a>";
    }else if(value.substring(0, 1) == '@'){
      return "<a href='struct.jsp?serviceName=" + serviceName + "&structName=" + value.substring(1) + "'>" + value.substring(1) + "</a>";
    }else if(value.substring(0, 1) == '#'){
      return "<a href='enum.jsp?serviceName=" + serviceName + "&enumName=" + value.substring(1) + "'>" + value.substring(1) + "</a>";
    }else{
      return value;
    }
  },

  fromMarkDown : function(value, template){
     return marked(value);
  }
});

这里添加了两个方法，分别对数据做不同的处理，并返回处理后的数据。第一步的模板中通过指定data-format，将第二布中的数据按指定方法处理后，再将处理后的数据添加到模板。

当然，后来的后来，又抛弃了Jquery-template,改成了直接使用jstlfor循环生成页面，更加直观和简洁，这里只是做个记录。

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。