JQuery Templates

JQuery templates let you seperate data from display code on the client. I'll explain why this is useful in future posts (if I get around to it). For now, I'll show you how it works.

First, I include the jquery library, and the jquery Template library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

Next, I embed a JSON string on my page. (This is javascript, so it goes in javascript tags).

var strData = '[{"firstname":"Dave","lastname":"Stillman","phone":"555-1212","address":"555 1212 Road, Nampa, ID"},{"firstname":"Donald","lastname":"Trump","phone":"555-5512","address":"255 Somewhere Lane, New York NY"}]';

I use eval to turn my json string into a javascript object.

var data = eval("(" + strData + ")");

 Next, I create a template script.  I create it the same way I would include inline javascript in a page, but I give it type='text/x-jquery-tmpl' instead of type='javascript'.  I also give it a unique ID, so I can access it later.

<script id="addressTmp" type="text/x-jquery-tmpl">
<b>${firstname},${lastname}</b><br>
${address}<br>
${phone}<br>
</script>

Next, I add a div where I want the data to be displayed

<div ID="addressDiv" />

Finally, I use a jquery template command to display the data

$("#addressTmp").tmpl(data).appendTo("#addressDiv");

Links

• jquery template documentation
  
• JQuery template overview at encosia.com
  

Continue reading to view source code and a live demo
Live Demo

  Sample 1  Sample 2  Sample 3

Source Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> <script language='javascript'> $(function() { var strData = '[{"firstname":"Dave","lastname":"Stillman","phone":"555-1212","address":"555 1212 Road, Nampa, ID"},{"firstname":"Donald","lastname":"Trump","phone":"555-5512","address":"255 Somewhere Lane, New York NY"}]'; var data = eval("(" + strData + ")"); $("#addressTmp").tmpl(data).appendTo("#addressDiv"); }); </script> <script id="addressTmp" type="text/x-jquery-tmpl"> <b>${firstname},${lastname}</b><br> ${address}<br> ${phone}<br> </script> <div id='addressDiv'/>