I've been wanting to work with the new jQuery templates plugin since I first read about it. It allows you to bring your views into jQuery and not rely on server-side languages to generate the html. This provides extreme flexibility and accelerates development. No longer do you need to loop over returned data and try to write your display in JavaScript.
To illustrate this, I've put together a series of posts exploring different options.
The first example we're going to look at doesn't require any ColdFusion or server-side scripting. You can view the jQuery template working example online. Be sure to view the source. There is no server-side processing going on.
We're going to create a struct and then use it to populate our jQuery template.
After including the jQuery and jQuery template JavaScript from the CDN, the first thing we're going to do is create our struct with a dataset we want to ultimately output:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
var bills = [
{
description: '$1 1957 Silver Certificate'
,price: '10'
}
,{
description: '$2 1963 Federal Reserve'
,price: '50'
}
,{
description: '$100 1928 Gold Certificate'
,price: '50.65'
}
]
1var bills = [
2 {
3 description: '$1 1957 Silver Certificate'
4 ,price: '10'
5 }
6 ,{
7 description: '$2 1963 Federal Reserve'
8 ,price: '50'
9 }
10 ,{
11 description: '$100 1928 Gold Certificate'
12 ,price: '50.65'
13 }
14 ]
The next thing we're going to put together is the actual jQuery template. This is a snippet of code that contains 'variables', denoted by ${ VARNAME }, that will be replaced with the actual data:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<script id="billTemplate" type="text/x-jquery-tmpl">
<div>
Bill Description: ${ description } <br />
Price: $${ price }
</div>
</script>
1<script id="billTemplate" type="text/x-jquery-tmpl">
2 <div>
3 Bill Description: ${ description } <br />
4 Price: $${ price }
5 </div>
6</script>
Don't let the double $$ confuse you. I want to display the price, so the first $ is the money sign and the second is the beginning of the template.
The last important line is the actual invocation of the template replacement code:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
$('#billTemplate').tmpl(bills).appendTo('#myBills');
1$('#billTemplate').tmpl(bills).appendTo('#myBills');
This tells jQuery to use our template, replace it with our data and then append it to the empty div.
Lastly, we apply some CSS formatting and our standard HTML5 code.
In the next post, we'll look at how to use ColdFusion to load the JSON dynamically. To view this working example, view jQuery template online or for the source, visit my Github.
Full source:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Client Templates Example</title>
<style type="text/css">
#myBills div {
background-color: navy;
color: white;
margin: 10px;
padding: 10px;
width: 300px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type='text/javascript'>
$(function(){
var bills = [
{
description: '$1 1957 Silver Certificate'
,price: '10'
}
,{
description: '$2 1963 Federal Reserve'
,price: '50'
}
,{
description: '$100 1928 Gold Certificate'
,price: '50.65'
}
]
$('#billTemplate').tmpl(bills).appendTo('#myBills');
});
</script>
</head>
<body>
<div id="content">
<div id="myBills"></div>
<script id="billTemplate" type="text/x-jquery-tmpl">
<div>
Bill Description: ${ description } <br />
Price: $${ price }
</div>
</script>
</div>
</body>
</html>
1<!DOCTYPE HTML>
2<html>
3<head>
4 <title>Simple Client Templates Example</title>
5 <style type="text/css">
6 #myBills div {
7 background-color: navy;
8 color: white;
9 margin: 10px;
10 padding: 10px;
11 width: 300px;
12 }
13 </style>
14
15 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
16 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
17
18 <script type='text/javascript'>
19 $(function(){
20
21 var bills = [
22 {
23 description: '$1 1957 Silver Certificate'
24 ,price: '10'
25 }
26 ,{
27 description: '$2 1963 Federal Reserve'
28 ,price: '50'
29 }
30 ,{
31 description: '$100 1928 Gold Certificate'
32 ,price: '50.65'
33 }
34 ]
35
36 $('#billTemplate').tmpl(bills).appendTo('#myBills');
37
38 });
39 </script>
40</head>
41<body>
42 <div id="content">
43
44 <div id="myBills"></div>
45
46 <script id="billTemplate" type="text/x-jquery-tmpl">
47 <div>
48 Bill Description: ${ description } <br />
49 Price: $${ price }
50 </div>
51 </script>
52
53 </div>
54</body>
55</html>
My core expertise focuses on architecting multi-lingual, enterprise-level digital solutions, including custom CMS's and large-scale applications which span multiple devices and computing languages.
Comments