jQuery templates are a cool way to tie a datasource (often json, but at least arrays of maps/structurscriptput. First we define a template which are placed within script tags so that the browser ignores the html inside it:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<script id="artistsTemplate" type="text/x-jquery-tmpl">
<div><h4>#${artistid} ${firstname} ${lastname}</h4>${city} ${state}</div>
</script>
1<script id="artistsTemplate" type="text/x-jquery-tmpl">
2 <div><h4>#${artistid} ${firstname} ${lastname}</h4>${city} ${state}</div>
3</script>
jQuery templates will loop over the array of maps/structures and for each ${xxx} replace the it with the value of a key of the same name (xxx). Quick sample of the first two records of data:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
[
{"state":"CO","lastname":"Donolan","firstname":"Aiden","artistid":1,"city":"Denver"},
{"state":"CA","lastname":"Weber","firstname":"Austin","artistid":2,"city":"Berkeley"}
]
1[
2 {"state":"CO","lastname":"Donolan","firstname":"Aiden","artistid":1,"city":"Denver"},
3 {"state":"CA","lastname":"Weber","firstname":"Austin","artistid":2,"city":"Berkeley"}
4]
The output from that we will place in the following div:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<div id="artistsContent"></div>
1<div id="artistsContent"></div>
Data will be loaded each time we click on the Load Data button:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<div><button iscript">Load Data</button> <span id="lastLoad"></span></div>
1<div><button iscript">Load Data</button> <span id="lastLoad"></span></div>
Here is the jQuery that makes it all happen:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<script type="text/javascript">
$(document).ready(function(){
$("#getData").click( function() {
$.getJSON("artistsRemote.cfc?method=getArtists&returnformat=json",
function(data){
//empty out the div that will hold the generated content
$("#artistsContent").empty();
//call the tmpl function, pass in the data and have it append to artistsContainer
$("#artistsTemplate").tmpl( data ).appendTo("#artistsContent");
//indicate when last loaded
var nowIs = new Date().toLocaleString();
$('#lastLoad').html( nowIs );
});
});
});
</script>
1<script type="text/javascript">
2$(document).ready(function(){
3$("#getData").click( function() {
4 $.getJSON("artistsRemote.cfc?method=getArtists&returnformat=json",
5 function(data){
6 //empty out the div that will hold the generated content
7 $("#artistsContent").empty();
8 //call the tmpl function, pass in the data and have it append to artistsContainer
9 $("#artistsTemplate").tmpl( data ).appendTo("#artistsContent");
10 //indicate when last loaded
11 var nowIs = new Date().toLocaleString();
12 $('#lastLoad').html( nowIs );
13 });
14});
15});
16</script>
And what it looks like:
Getting the json data from ColdFusion is pretty easy. Here is the full ArtistsRemote.cfc (pick one of the return statements!):
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
component {
remote function getArtists() {
return entityLoad( "Artists", {}, "artistid");
return ormExecuteQuery(" SELECT new map(artistid as artistid, firstname as firstname, lastname as lastname,
city as city, state as state ) FROM Artists ORDER BY artistid");
}
}
1component {
2remote function getArtists() {
3 return entityLoad( "Artists", {}, "artistid");
4 return ormExecuteQuery(" SELECT new map(artistid as artistid, firstname as firstname, lastname as lastname,
5 city as city, state as state ) FROM Artists ORDER BY artistid");
6}
7}
The first return statement will serialize the whole object, the second just the five properties we will display.
Application.cfc:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
component {
this.name = "templatesSample";
this.datasource = "cfartgallery";
this.ormEnabled = true;
}
1component {
2 this.name = "templatesSample";
3 this.datasource = "cfartgallery";
4 this.ormEnabled = true;
5}
For this example I am letting ColdFusion introspect the database for all columns which makes Artists.cfc pretty small:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
component persistent="true" {
}
1component persistent="true" {
2}
Finally for reference here is the full html page:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<html>
<head>
<title>Template Fun</title>
<style type="text/css">
body { font-family: Arial; font-size: 0.8em; }
h4 { margin: 0.5em 0 0 0 }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#getData").click( function() {
$.getJSON("artistsRemote.cfc?method=getArtists&returnformat=json",
function(data){
//empty out the div that will hold the generated content
$("#artistsContent").empty();
//call the tmpl function, pass in the data and have it append to artistsContainer
$("#artistsTemplate").tmpl( data ).appendTo("#artistsContent");
//indicate when last loaded
var nowIs = new Date().toLocaleString();
$('#lastLoad').html( nowIs );
});
});
});
</script>
</head>
<body>
<div><button id="getData">Load Data</button> <span id="lastLoad"></span></div>
<script id="artistsTemplate" type="text/x-jquery-tmpl">
<div><h4>#${artistid} ${firstname} ${lastname}</h4>${city} ${state}</div>
</script>
<div id="artistsContent"></div>
</body>
</html>
1<html>
2<head>
3 <title>Template Fun</title>
4 <style type="text/css">
5 body { font-family: Arial; font-size: 0.8em; }
6 h4 { margin: 0.5em 0 0 0 }
7 </style>
8 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
9 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
10<script type="text/javascript">
11$(document).ready(function(){
12$("#getData").click( function() {
13 $.getJSON("artistsRemote.cfc?method=getArtists&returnformat=json",
14 function(data){
15 //empty out the div that will hold the generated content
16 $("#artistsContent").empty();
17 //call the tmpl function, pass in the data and have it append to artistsContainer
18 $("#artistsTemplate").tmpl( data ).appendTo("#artistsContent");
19 //indicate when last loaded
20 var nowIs = new Date().toLocaleString();
21 $('#lastLoad').html( nowIs );
22 });
23});
24});
25</script>
26</head>
27<body>
28
29<div><button id="getData">Load Data</button> <span id="lastLoad"></span></div>
30
31<script id="artistsTemplate" type="text/x-jquery-tmpl">
32 <div><h4>#${artistid} ${firstname} ${lastname}</h4>${city} ${state}</div>
33</script>
34
35<div id="artistsContent"></div>
36
37</body>
38</html>
