jQuery模板

这条新闻是在infoq上看到的：

微软加大对jQuery的投资力度

在新闻底部有个链接就是讲jquery的试验性插件，该插件就是jquery模板的应用

试验性的插件

我们来看个简单的实例：

<mce:style type="text/css"><!-- *[data-tmpl], .html-template { display:none; } .peopleTable td { border:2px solid #555; text-align:center; } .person{ background-color:#AFA; } .personAlt{ background-color:#9ED; } .separator { background-color:#C77; height:6px;} .cityseparator { background-color:#CCC; height:4px;} .peopleTable { border-collapse:collapse; border:2px solid #555; } --></mce:style><style type="text/css" mce_bogus="1">*[data-tmpl], .html-template { display:none; } .peopleTable td { border:2px solid #555; text-align:center; } .person{ background-color:#AFA; } .personAlt{ background-color:#9ED; } .separator { background-color:#C77; height:6px;} .cityseparator { background-color:#CCC; height:4px;} .peopleTable { border-collapse:collapse; border:2px solid #555; }</style> <mce:script src="http://code.jquery.com/jquery.js" mce_src="http://code.jquery.com/jquery.js"></mce:script> <mce:script src="../../jquery.tmpl.js" mce_src="jquery.tmpl.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(function(){ $(".peopleTable") .append("#tmplPeople", people, {allCities: allCities} ); }); var people = [ { firstName: "John", lastName: "Resig", url: "http://ejohn.org/", cities: [ "BSTN", "NY", "SF" ] }, { firstName: "Dave", lastName: "Reed", url: "http://dave.org/", cities: [ "RDMD", "STL", "SF", "LA" ] }, { firstName: "Boris", lastName: "Moore", url: "http://boris.org/", cities: [ "RDMD" ] } ]; var allCities = { BSTN: { name: "Boston", state: "MA", weather: "Cold" }, SF: { name: "San Francisco", state: "CA", weather: "Warm" }, STL: { name: "Seattle", state: "WA", weather: "Wet" }, RDMD: { name: "Redmond", state: "WA", weather: "Wet" }, LA: { name: "Los Angeles", state: "CA", weather: "Hot" }, NY: { name: "New York", state: "NY", weather: "Variable" } }; function getName() { return this.data.firstName + " " + this.data.lastName; } function getCities( begin, end ) { return $.map(this.data.cities.slice(begin, end), function(city) { return allCities[city]; }); } function getCityCount( begin, end ) { return this.data.cities.slice(begin, end).length; } function alternate() { return ($.inArray( this.data, people ) % 2) ? "personAlt" : "person"; } var startIndex = 1, endIndex = 3; // --></mce:script> <mce:script id="tmplPeople" type="text/html"><!-- <tr class="${alternate}"><td colspan="3"><a href="${url}" mce_href="${url}">${getName}</a></td></tr> {{tmpl "#tmplSeparator"}} {{if getCityCount(startIndex, endIndex)}} <tr class="${alternate}"><td colspan="3"><i>Favorite Cities</i></td></tr> {{each getCities(startIndex, endIndex)}} {{tmpl(null, {type:"city"}) "#tmplSeparator"}} <tr class="${alternate}"> <td>${$index + 1}</td> <td><b>${name}</b></td> <td>${state}</td> </tr> <tr class="${alternate}"><td colspan="3"><i>${weather}...</i></td></tr> {{/each}} {{tmpl "#tmplSeparator"}} {{/if}} // --></mce:script> <mce:script id="tmplSeparator" type="text/html"><!-- <tr class="${$ctx.type}separator"><td colspan="3"></td></tr> // --></mce:script> <table class="peopleTable"><tbody> <tr class="separator"><td colspan="3"></td></tr> </tbody></table>

实现的页面效果图：

满足了基本的要求，也支持扩展方法的使用。

继续关注...