The jQuery Templating Plugin and Why You Should Be Excited!
One of the things that just seemed to be missing from the jQuery ecosystem was a truly simple to use data-binding mechanism. I have been writing about and presenting the use of John Resig’s Micro-Templating mechanism all over the country this Winter. Now I can update my sample code to use the templating plugin officially introduced at MIX last week.
The jQuery templating plugin is the first addition added to the jQuery Core from Microsoft. To be honest the Microsoft team is doing some real intense collaboration with the jQuery Core team from what I have observed. But that aside, lets see what we can do with this great new plugin.
The biggest problem with using Micro-Templates was the fact is was not in a real plugin format. Instead is requires sort of a loose group of functions. So I am really glad to see this progress to a much richer plugin format. Rather than reviewing all the cool new features, I will defer that to the actual templating plugin proposal that walks through the new functionality. I want to show how to update my WCF/jQuery sample code to use the new plugin.
The new plugin not only simplifies the data binding process, but it adds much more functionality than I had before at least in the plugin. So with all the great new features you should be real excited!
The first thing you need to update is the field delimiters from the <%=%> I have been using to {%=%}. This is a slight change from the previous syntax, which I was perfectly fine using. But they decided to change it for various reasons. But since this is still a Beta offering this syntax is subject to change, so pay attention in case it does.
The View Contacts page is the one page that needs to be updated to reflect these changes. There are two markup templates that need to be updated to the following:
<script id="ContactRowTemplate" type="text/html">
{% for(var i=0; i < Contacts.length; i++)
{
var contact = Contacts[i];
}
<tr>
<td>
{%=contact.FirstName%} {%=contact.LastName%}
</td>
<td>
{%=contact.City%}
</td>
<td>
{%=contact.State%}
</td>
<td><img src="images/edit.gif" onclick="GetNewContactInfo({%=contact.ContactId%});" /></td>
</tr>
{% } %}
</script>
<script id="ContactInfoDlg" type="text/html">
ol>
<li>
<label id="lblFirstName">
First Name :
</label>
{%= FirstName%}</li>
<li>
<label id="lbllastName">
Last Name :
</label>
{%= LastName%}</li>
<li>
<label id="lblAddr1">
Address :
</label>
{%= Address1%}
</li>
<li>
<label id="lblAddr2">
Address 2 :
</label>
{%= Address2%}
</li>
<li>
<label id="lblCity">
City :
</label>
{%= City%}
</li>
<li>
<label id="lblState">
State :
</label>
{%= State%}
</li>
<li>
<label id="lblZip">
Zip :
</label>
{%= PostalCode%}
</li>
<li>
<label id="lblPhone">
Phone :
</label>
{%= PhoneNumber%}
</li>
<li>
<label id="lblEmail">
E-Mail :
</label>
{%= EMail%}</li>
<li>
<label id="lblComment">
Comment or Question :
</label>
{%= Comment%}</li>
</ol>
</script>
That was not so bad, I even used Visual Studio’s search and replace functionality to make it go faster.
Next I added some new functions, only changing what I needed to change to utilize the new templating plugin. The NewProcessActiveContacts function looks like the following:
function NewProcessActiveContacts(response) {
if (!response) {
$("#dContacts").empty().html('No Contacts Returned');
return;
}
$("#dContacts").html($("#contactsTable").html());
if (response.Contacts) {
$("#ContactRowTemplate")
.render(response)
.appendTo("#tblContactList tbody");
$('#tblContactList tbody tr:nth-child(even)').addClass('evenRow');
}
$.unblockUI();
}
Before I talk about the template plugin application I want to point out that I placed the table markup into a script tag. This puts the markup in the page where it belongs, not the script. Instead I reference the script block containing the table skeleton and insert it in the dContacts DIV. The table markup is accessible by calling the jQuer html() method and passing that result to the html() method of the Contacts DIV.
$("#dContacts").html($("#contactsTable").html());
Now to the good stuff (finally). Instead of calling $.parseTemplate this time I call render. off the ContactRowTemplate script block. The render method accepts two parameters, data and an optional options. For this demo I do not need to pass any options. I will save that for a later post. The last step is to append the resulting markup to a DOM element. In this case that would be the TBODY in the results table. Ultimately this is a much cleaner pattern to follow than the previous pattern I have been using.
The next function that got updated is the DisplayNewContactInfo. Again the render function takes the contact object returned from the server and merges it into the template.
function DisplayNewContactInfo(response) {
if (!response || !response.ContactInfo) {
showErrorMsg('No Contact Returned');
return;
}
var dContactDlg = $('#dContactDlg');
if (dContactDlg.length == 0) {
$("<div/>", { id: 'dContactDlg' })
.appendTo("Body");
dContactDlg = $('#dContactDlg');
}
$.unblockUI();
dContactDlg.empty();
var contact = response.ContactInfo;
$("#ContactInfoDlg")
.render(contact)
.appendTo("#dContactDlg");
showContactDialog(dContactDlg);
}
There you have it, utilizing the new jQuery plugin to bind data returned from a WCF service method! I have updated the source project for you to download and try it out yourself.