Using The jQuery Template Plugin tmplItem Feature
Last week I created a Tree View using the new jQuery Templating plugin. The example shows how to display a series of expandable tree nodes to see crab pot strings used by a fleet of crab boats. Today I am going to extend this example to show another Template plugin feature, $.tmplItem.
When an object is merged or bound to a template using the Template plugin the object is actually bound to the resulting item. Under the covers the object is stored against the target element using the jQuery $.data mechanism.
The $.tmplItem function accepts a parameter and it can either be a selector or a jQuery object. It can also be called from a jQuery object. The function returns a tmplItem data structure, which gives access to the DOM elements, the data item and a few other important things.
To demonstrate how to use the $.tmplItem function I added hover functionality to the ship node, or the tree’s top level nodes. As you hover over each node a detail is populated to the right of the tree.
The hover function’s callback function retrieves the node’s data by calling the $.tmplItem function, passing a reference to the active node or this. I created a local variable here called crabBoat to make it easy to watch the values (shown below). The next line sets the innerHTML, using the $.html function, to a merged template using the crabBoat value and the $.tmpl function.
init_tree();
$(".shipNode").hover(function(){
var crabBoat = $.tmplItem( this ).data;
$("#boatDetail").html($("#shipDetailTemplate").tmpl(crabBoat));
}, function(){
//$("#boatDetail").empty();
});
I kept it very simple here, just showing the Ship and Captain’s names. You could have created just about anything you wanted to display the ship’s entire data structure, including crab pots, etc. As you roll your mouse over the tree this detail will change to display the most recent ship node’s details.
The shipDetailTemplate is shown here. It is defines the merge fields to be used with the $.tmpl function as I demonstrated in the previous post.
<script id="shipDetailTemplate" type="text/html"> 1:
2: <fieldset>
3: <ul>
4: <li><label for="shipName">Ship Name:</label><input id="shipName" value="${ShipName}"/></li> 5: <li><label for="captain">Captain:</label><input id="captain" value="${Captain}"/></li> 6: </ul>
7: </fieldset>
</script>
The crabBoat object is shown below. You can see the object contains a crabBoat, which is the equivalent to the Ship class, defined in the App_Code folder. It contains the Captain’s name, ship’s name and of course the crab pot strings.
This is a very cool feature included in the new jQuery template plugin and here’s why. As I matured my experience with the microtemplates I kept finding myself needing to reference the original data used to build the DOM elements. I eventually started binding the initial data to what I call the anchor element to reference later. But it always felt sort of clumsy because I would have to find the correct object or array item to reference. The Template plugin does the same thing to a certain extent, but provides a very elegant way to reference the node’s bound data.
As you grow your experience building rich AJAX user interfaces you will start to appreciate the power the jQuery $.tmplItem functionality provides.
I have extended the sample code to include the hover function definition so you can see this code in action. You can download the updated sample code here.