JSON JQUERY模板实现说明

  可是在客户端再现数据也是一个不小的问题,用javascript处理经常会遇到很繁琐的事.尤其大批量具有相同结构的数据,例如表格,处理方式不尽如意.如果能有一个模板控件,就像服务器端asp.net Gridview或者repeater一样的东西就好很多.最近看到一个非常优秀的解决方案,让我在使用方便的同时不得不为作者的精巧设计而作一番感叹.该解决方案用了区区二十几行代码,实现了别人要用几十甚至上百K的js库所做的工作.它就是John Resig 的 Microtemplating engine.大师Rick Strahl有一篇文章专门对此作了详细讲述(Client Templating with Jquery).我在这里把最核心部分提取出来以方便国人学习。

  下面一段程序就是microtemplating engine.

  

复制代码 代码如下:

  var _tmplCache = {}

  this.parseTemplate = function(str, data) {

  /// <summary>

  /// Client side template parser that uses <#= #> and <# code #> expressions.

  /// and # # code blocks for template expansion.

  /// NOTE: chokes on single quotes in the document in some situations

  /// use ’ for literals in text and avoid any single quote

  /// attribute delimiters.

  /// </summary>

  /// <param name="str" type="string">The text of the template to expand</param>

  /// <param name="data" type="var">

  /// Any data that is to be merged. Pass an object and

  /// that object's properties are visible as variables.

  /// </param>

  /// <returns type="string" />

  var err = "";

  try {

  var func = _tmplCache[str];

  if (!func) {

  var strFunc =

  "var p=[],print=function(){p.push.apply(p,arguments);};" +

  "with(obj){p.push('" +

  str.replace(/[\r\t\n]/g, " ")

  .replace(/'(?=[^#]*#>)/g, "\t")

  .split("'").join("\\'")

  .split("\t").join("'")

  .replace(/<#=(.+?)#>/g, "',$1,'")

  .split("<#").join("');")

  .split("#>").join("p.push('")

  + "');}return p.join('');";

  //alert(strFunc);

  func = new Function("obj", strFunc);

  _tmplCache[str] = func;

  }

  return func(data);

  } catch (e) { err = e.message; }

  return "< # ERROR: " + err.htmlEncode() + " # >";

  }

  如何使用:

  

复制代码 代码如下:
parseTemplate($("#ItemTemplate").html(),{ name: "rick", address: { street: "32 kaiea", city: "paia"} } );

  上面程序所用的模板:

  

复制代码 代码如下:
<script id="ItemTemplate" type="text/html"><div><div><#= name #></div><div><#= address.street #></div> </div></script>

  如果想用循环:

  

复制代码 代码如下:
$.each(dataarray,function(index,dataItem){

  parseTemplate($("#ItemTemplate").html(), dataItem );

  })

  很简单很精巧吧?