可是在客户端再现数据也是一个不小的问题,用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) {
///
/// client side template parser that uses and 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.
///
/// the text of the template to expand
///
/// any data that is to be merged. pass an object and
/// that object's properties are visible as variables.
///
///
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(.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 ;
}
如何使用:
复制代码 代码如下:
parsetemplate($(#itemtemplate).html(),{ name: rick, address: { street: 32 kaiea, city: paia} } );
上面程序所用的模板:
复制代码 代码如下:
如果想用循环:
复制代码 代码如下:
$.each(dataarray,function(index,dataitem){
parsetemplate($(#itemtemplate).html(), dataitem );
})
很简单很精巧吧?