For a couple of years now, we've been hearing about a cool and upcoming client-side jQuery plug-in called jQuery Templates. The promise was that the new templates would easily let you generate and render HTML on the client by defining the browser-generated HTML for each item in a set of data, using the structure's declarative definition of the generated HTML along with binding expressions. You can read my article, “Microsoft's jQuery Templates Extension,” which explains the benefits of templates, how templates work, and how you can easily structure content that's dynamically added to a page without using string concatenation or writing complex code. At one point, templates were destined to be built into version 1.5 of the core jQuery library.
As of October 2011, jQuery Templates is no more. It's now a deprecated technology that never saw the light of day as a released product—and never will. You can read the blog posts I've included in the Related Content section at the end of this article for the gory details, but jQuery Templates has become a victim of the jQuery team's changed stance on official plug-ins and Microsoft developer Boris Moore's new direction on the technology. Moore has been the main force behind jQuery Templates, although a templating technology has long been planned for jQuery.
All is not lost, however. In its stead, Microsoft and the jQuery team are focusing on a new pair of technologies: JsRender and JsViews. JsRender is described as the next generation of templates for high-performance, pure string-based rendering without a document object model (DOM) or jQuery dependency, with a codeless tag syntax. JsViews provides interactive, data-driven views that are built on top of JsRender that include a view hierarchy, observable changes, and data binding. Together, JsRender and JsViews do pretty much everything that jQuery Templates was planned to do.
I suppose this isn't the worst news, since Templates never appeared as a released product. But a lot of people have been using it, paying the price of prerelease software for the nice benefits it bestows on web pages. If you're one of those people, there's nothing stopping you from continuing to use it, and even enhance it for your own purposes if you wish. But understand that it's now a dead end. Moving forward, you should consider using JsRender and JsViews; however, because these are both prerelease technologies, you should tread carefully—particularly because the documentation is virtually non-existent as I write this.
The really good news is that this has given Moore the opportunity to start from scratch and take advantage of all that he and his team have learned with Templates. It's a rare opportunity to be able to do a fresh restart like that on a product, and I'm confident that the end result is going to be far better because of it.
Using JsRender is fairly straightforward, as you can see by exploring the demos available on GitHub. A page that uses JsRender starts by defining a template as seen here:
<script id="movieTemplate" type="text/x-jquery-tmpl">
<div>
{{=$itemNumber}}: <b>{{=Name}}</b> ({{=ReleaseYear}})
</div>
</script>
This is the template code that the page uses to render all of the elements in a collection, with double curly brackets functioning as code delimiters. Assuming that there's a movies array available with Name and ReleaseYear properties, the following code will update the movieList div element to display a set of nested div elements, one for each movie, as defined by the template:
$( "#movieList" ).html(
$( "#movieTemplate" ).render( movies )
);
By using a tool such as Firebug in Firefox, you can see each movie's output:
<div id="movieList">
<div>
1:
<b>The Red Violin</b>
(1998)
</div>
…
Then you can use the JsViews link method to essentially bind data to the template and allow live interactivity, as this code shows:
$( "#movieList3" ).link( movies, "movieTemplate" );
Both JsRender and JsViews are likely to change before they get released as beta versions. Moore says that JsRender is nearing beta release; JsViews will likely follow soon after. The promise of templates is preserved in these two technologies, and it will be great when things settle down and stabilize enough for a release worthy of production.
My conclusion from the article about jQuery Templates remains valid, albeit with the new technologies: When the final versions of JsRender and JsViews are released, it'll be much easier to create updated content for a page using JavaScript objects. The template definition and required code is much simpler than performing string concatenation, and you can create very complex templates for updated content that would be a nightmare to write code for!
