Heim > Web-Frontend > js-Tutorial > JSON JQUERY模板实现说明_jquery

JSON JQUERY模板实现说明_jquery

WBOY
Freigeben: 2016-05-16 18:23:57
Original
1109 Leute haben es durchsucht

可是在客户端再现数据也是一个不小的问题,用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 );
})

很简单很精巧吧?
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage