Earlier today Rey Bango posted an excellent article about jQuery Templates (Not Using jQuery JavaScript Templates? You're Really Missing Out.) This was something I had meant to look at before but just never got around to it. If you haven't looked at this feature, please stop reading and catch up on Rey's post. After reading it, I thought it would be cool to employ the technique to update the demo I posted earlier today (Another simple jQuery/ColdFusion example). It took me a grand total of five minutes. Here is the original code used to render categories:
//"draw" s onto the screen $("#nav").html(s) })$.getJSON("data.cfc?method=getcategories&returnformat=json&queryformat=column", {}, function(res,code) { //create a string for our result var s = "" for(var i=0; i<res.DATA.ID.length; i++) { s += "<a href='' class='navLink' id='nav_" + res.DATA.ID[i]+ "'>"+res.DATA.NAME[i]+"</a><br/>" }
Compare that with the template version:
<script id="categoryTemplate" type="text/html"> <a href="" class="navLink" id="nav_${ID}">${NAME}</a><br/> </script> (more stuff here cut out...) //Call the CFC to get queries $.getJSON("data.cfc?method=getcategories&returnformat=json&queryformat=column", {}, function(res,code) { var newData = [] for(var i=0; i<res.DATA.ID.length; i++) { newData[newData.length] = { "ID":res.DATA.ID[i], "NAME":res.DATA.NAME[i]} } $("#categoryTemplate").tmpl(newData).appendTo("#nav") })
As you see - I had to reform the data returned by ColdFusion to make it work with the template engine. I could do this at the CFC, but I like my CFC being abstract and not tied to any implementation. So I didn't trim many lines of code here (I may have actually went up by one or two), but the way it works is much cleaner now. I'm reminded of Adobe Spry, which to me has always shined in the area of actually displaying Ajax content.
Next up I rewrote the detail portion:
//listen for clicks on navLink $(".navLink").live("click", function(e) { var clickedId = $(this).attr("id") var id = clickedId.split("_")[1] //load the detail $.getJSON("data.cfc?method=getdetail&returnformat=json", {"id":id}, function(res,code) { $("#content").html($("#detailTemplate").tmpl(res)) }) e.preventDefault() })<script id="detailTemplate" type="text/html"> <h2>${NAME}</h2> This person is ${AGE} years old. </script> (more stuff here....)
This modification was even simpler. My simple CFML struct worked just fine for the template engine. All in all a very painless modification, but I really dig it. You can find out more about the Template plugin here: http://github.com/nje/jquery-tmpl
Here is the entire page for the new version:
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery.tmpl.js"></script> <script id="categoryTemplate" type="text/html"> <a href="" class="navLink" id="nav_${ID}">${NAME}</a><br/> </script> <script id="detailTemplate" type="text/html"> <h2>${NAME}</h2> This person is ${AGE} years old. </script> <script> $(document).ready(function() { //Call the CFC to get queries $.getJSON("data.cfc?method=getcategories&returnformat=json&queryformat=column", {}, function(res,code) { var newData = [] for(var i=0; i<res.DATA.ID.length; i++) { newData[newData.length] = { "ID":res.DATA.ID[i], "NAME":res.DATA.NAME[i]} } $("#categoryTemplate").tmpl(newData).appendTo("#nav") }) //listen for clicks on navLink $(".navLink").live("click", function(e) { var clickedId = $(this).attr("id") var id = clickedId.split("_")[1] //load the detail $.getJSON("data.cfc?method=getdetail&returnformat=json", {"id":id}, function(res,code) { $("#content").html($("#detailTemplate").tmpl(res)) }) e.preventDefault() }) }) </script> </head> <body> <div id="nav"></div> <div id="content"></div> </body> </html>