Oh my goodness, work has just been way to hectic the last few weeks. Had no time to blog at all. Not good.

Never mind though as I have cleared my bad case of Blogstipation now and today I will be mostly talking about jQuery Templates.

This is an up and coming feature in jQuery 1.5 and combined with, wait for it, my good friends OData and WCF Data Services is just killer.

No more horrible embedded mark-up in script. Be gone forever.

Essentially jQuery Templating is client side data binding. I know, I know, you are feeling a slight sense of arousal. Try and contain yourself though.

So how does it work.

Well first of all you will need to download it from here:

I know, I know it’s a Beta product, it’s hosted on the devils CDN but get over it. a) Google is constantly in Beta and b) if you think Microsoft is the devil you are probably an Apple Fan Boy and deluded anyway Smile

Of course you only need 1 of the above. Just include this, and of course jQuery on the page/template where you want to use it.

Let’s get our hands dirty and look at some code. Suppose we have a list of states that will be part of a select list like the one shown below:


To populate this list using my favourite recipe of ADO.NET Entity Framework, WCF Data Services and OData I would need the script shown below (assuming of course my backend code is all setup): function BindStates() { var url = "/ConferenceService.svc/GetStates"; $.ajax({ type: "GET", url: url, async: false, contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { list = msg.d; var options = ""; for (var i = 0; i < list.length; i++) { options += " + list[i]["StateName"] + ""; } $("#state-selector").append(options); }, error: function (xhr) { ShowError(xhr); } }); } Now this is not so bad and is how I have been doing things for quite some time now. However, if you are populating a table of data with all sorts of conditional rules this can fast become a big mess of spaghetti. So here is the alternative solution using the new jQuery Templating model. Change your mark-up to this:

<divid="search-panel"><selectid="state-selector"class="search-parameter"><optionvalue="-1">All Statesoption>select><scriptid="state-template"type="text/x-jquery-tmpl"> >${StateName} script>div>

Take note of the