Wednesday, November 23, 2011

Parsing XML and databinding using jsRender and jsViews (RIP jQuery Templates)

I have always been a huge fan of the very flexible ASP.NET ListView control for creating templates and databinding nested data collections. Recently though I have been making a stronger effort to work with client side technologies like jQuery and client friendly data formats like JSON and JSONP. Thanks to the hard work of Microsoft’s Boris Moore, a new technology called jQuery Templates was put into beta as an official plugin and a CDN was created in jQuery and Microsoft. Unfortunately after spending some time studying the framework, I learned that it had been deprecated, “rebranded” as jsRender and jsViews, and a tentative schedule to add it to the jQuery UI framework (at least the jsRender portion). Fortunately, the new framework still has support, has improved performance, and a syntax that hasn’t changed too much. This is really a useful technology, so hopefully it will get adopted soon as a first class jQuery plugin or independent framework.
jsRender Databinding SyntaxThe first line initializes the template object. The object is then rendered with the data and appended to an html element.
$("#tblTemplate").template("tblTemplate");
$("#tblBod").append($.render(obj, "tblTemplate"));