Microsoft has embraced jQuery in a big way, even to the point of creating its own extensions to the core library as part of the standard jQuery contribution process. Some of Microsoft's top web and JavaScript developers are working with members of the core jQuery team to create extensions that replace parts of their Microsoft Ajax Library. These extensions do things like make data more readily usable from client-side web pages and make it easier to implement globalization on a site. One group is even attempting to create a UI grid that will be full-featured enough to handle almost any kind of scenario. These are exciting times in Microsoft's corner of jQuery!
Client-side templates were one of the major features that Microsoft added to its Ajax Library before it ceased all development on it and switched to jQuery. Shortly after announcing their support for jQuery in ASP.NET and Visual Studio, Microsoft made a proposal to add templates to jQuery, and after a lot of hard work by Microsoft and the jQuery community, templates are close to reality.
Templates let you easily generate and render HTML on the client by defining the HTML that the browser should generate for each item in a set of data. The template is a declarative definition of the structure of the generated HTML along with binding expressions, so that at runtime you can programmatically invoke the template with data as JavaScript objects to generate content and markup for the page. You can generate the JavaScript objects dynamically on the client or retrieve them via Ajax from the server.
The main benefit of using client-side templates is that you can easily structure content you add dynamically to a page without using string concatenation and the pain of writing code to make it all work. Simply define the template using plain old HTML, insert simple binding expressions where the data from each data item should go, and invoke the template at runtime. It really is a pretty slick way of updating a page on the client.
By the way, at one point it looked like the jQuery team would incorporate templates into the core library. But that didn't happen in jQuery 1.5, much to the disappointment of the Microsoft developers who built the plug-in. It appears likely that templates will make their way into the library at some point, but no one seems to know when that will happen.
Basic Template Structure
Templates can sound like a rather abstract concept, but an example will serve to make them clearer. The sample page, shown in Figure 1, calls an ASP.NET web service to retrieve JSON data containing information about a few of the boroughs in Alaska. The page uses templates to dynamically structure the data into the list items displayed on the page. The first three buttons all display the same information, and the fourth button uses a conditional expression in a template to display additional information. The figure shows what you'll see when you click any of the first three buttons; you'll learn about the fourth button later in this article.
Figure 1: Result of clicking button on a sample page using templates