jQuery Templates by Microsoft
Back in 2008, Microsoft began shipping Visual Studio with the jQuery library already included. Now, Microsoft is showing its full support of jQuery by developing a very crafty jQuery template plug-in. Originally, John Resig built a simple prototype of the plug-in which Microsoft has now extended and transformed into something quite spectacular. Rey Bango recently presented on the current state of the plug-in at a ThinkVitamin jQuery Online Conference on July 12th, 2010. You can find the source code for his demo here.
First, let’s talk about what a (micro) template is exactly. In short, its a fragment of HTML suitable for passing data to which then gets rendered to an HTML document. An example of a three-column row as a template :
<tr>
<td>${Name}</td>
<td>${Phone}</td>
<td>${Email}</td>
</tr>
An example of some JSON data being sent from the server :
{"Name":"John", "Phone":"555-1234", "Email":"john@jqueryrefuge.com"}
And we wind up with…
<tr> <td>John</td> <td>555-1234</td> <td>john@jqueryrefuge.com</td> </tr>
In a quick and dirty sense, that is what templates do, they define an HTML structure for data to be inserted in to. The client/server can communicate much quicker by strictly passing data back to each other. In other words, no HTML markup should ever be passed between the server/client under a template system.
Microsoft’s Template Plug-in – Syntax & Usage
Creating a template is very easy, simple wrap it in a <script> tag like so…
<script id="MyTemplate" type="text/html">
<tr>
<td>${Name}</td>
<td>${Phone}</td>
<td>${Email}</td>
</tr>
</script>
In the plug-in’s current state it is required that the script tag go directly into the document’s <head> section. Also, notice the script type is set to “text/html”.
Next, we’ll predefine our data that is going to be passed into our template.
var data = [
{ Name: "John", Phone: "555-1234", Email: "john@jqueryrefuge.com" },
{ Name: "Tom", Phone: "555-5678", Email: "tom@jqueryrefuge.com" },
{ Name: "Kenny", Phone: "555-9012", Email: "ken@jqueryrefuge.com" }
];
And the jQuery magic to make the call:
$('#MyTemplate').tmpl(data).appendTo('table');
or (just to show you another perspective but I highly prefer the first one)
$('table').append($('#MyTemplate').tmpl(data));
The .tmpl() method accepts a data object (or a data object collection in this case), and returns the HTML markup as the result which when appended to an empty table (w/ headers) would look like this.
| Name | Phone | |
|---|---|---|
| John | 555-1234 | john@jqueryrefuge.com |
| Tom | 555-5678 | tom@jqueryrefuge.com |
| Kenny | 555-9012 | ken@jqueryrefuge.com |
And that is all there is to it! It’s a work in progress still and there is no real eta yet on when it will be completed by the team. There is also a small chance that this may become part of the jQuery core package.
I leave you with a links to a demo page, the download, the proposal, and some extend usage syntax for the plug-in.
Syntax:
//Inserts the variable as is
${var} or {=var}
//Treats the variable as html
{{html var}}
//For each logic
{{each var}}
//Code blocks
{{if (condition)}} ... {{else}} ... {{/if}}
//Call another template inside another so you can nest templates!!
{{tmpl($dataobject) "#TemplateID"}}
More on nesting templates here.
View a demo page here.
Download the plug-in from github.
Microsoft proposal for the plug-in can be found here.
In: HTML, jQuery · Tagged with: dom manipulation, jquery, microsoft, plug-in, templates
