3 <script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script>
4 <script language="javascript">
10 Copyright (C) 2006-2008 Infinity Interactive, Inc.
12 http://www.iinteractive.com
14 This library is free software; you can redistribute it
15 and/or modify it under the same terms as Perl itself.
19 /**************** Templating Objects ****************/
21 function Param (value) { this.value = value }
22 Param.prototype.find_and_replace = function (template, selector, value) {
23 template.find(selector)
24 .each(function () { jQuery(this).html(value) })
26 Param.prototype.render = function (template, selector) {
27 this.find_and_replace(template, selector, this.value);
30 function Thunk (func) {
33 Thunk.prototype = new Param ();
34 Thunk.prototype.render = function (template, selector) {
35 this.find_and_replace(
38 this.func(template, selector)
42 function MethodThunk (invocant, method_name) {
43 this.func = function () { return invocant[method_name]() }
45 MethodThunk.prototype = new Thunk ();
47 function PropertyThunk (invocant, property_name) {
48 this.func = function () { return invocant[property_name] }
50 PropertyThunk.prototype = new Thunk ();
52 function Collection (params) {
53 this.css_selector = params['css_selector'];
54 this.values = params['values'];
55 this.transformer = params['transformer'];
57 Collection.prototype = new Param ();
58 Collection.prototype.get_values = function () {
59 return (this.transformer == undefined)
61 : jQuery.map(this.values, this.transformer)
63 Collection.prototype.render = function (template, selector) {
64 var selection = template.find(selector).find(this.css_selector);
65 var target = selection.parent();
71 selection.clone(true).process_template(this)
77 function Hierarchy (params) {
78 this.list_selector = params['list_selector'];
79 this.item_selector = params['item_selector'];
80 this.values = params['values'];
82 Hierarchy.prototype = new Param ();
83 Hierarchy.prototype.get_values = function () { return this.values }
84 Hierarchy.prototype.render = function (template, selector) {
85 var selection = template.find(selector);
86 var list_selection = selection.find(this.list_selector);
87 var item_selection = selection.find(this.item_selector);
90 list_selection.empty();
92 var traverse = function (element, tree) {
94 var node_element = item_selection.clone(true).process_template(
97 element.append(node_element);
98 // if the node has children then ...
99 if (tree['children'] != undefined) {
100 var new_element = list_selection.clone(true);
104 traverse(new_element, this);
105 node_element.append(new_element);
111 // create the root ...
112 var root_node = list_selection.clone(true);
113 traverse(root_node, this.get_values());
114 selection.append(root_node);
117 /************* JQuery Plugin *******************/
120 process_template : function (params) {
124 function (selector, param) {
125 ((typeof param == 'object')
127 : new Param (param)).render(template, selector)
134 /********************** Paramters ***************************/
136 function User (name) {
139 User.prototype.name = function () { return this._name }
141 function Product (id, name) {
145 Product.prototype.get_id = function () { return this._id }
148 '#logo' : new Thunk (function (t, selector) {
149 t.find(selector).attr({
150 'src' : 'http://iinteractive.com/images/logo.gif',
151 'style' : 'padding: 10px;',
154 '.username' : new MethodThunk (new User ('Stevan'), "name"),
155 '#user_quotation' : 'JQuery Rocks',
156 '.copyright' : new Thunk (function () { return "Copyright (c) " + (new Date ()).getFullYear() }),
157 '#products' : new Collection ({
158 css_selector : '.row',
160 new Product (10, 'Foo'),
161 new Product (11, 'Bar'),
162 new Product (12, 'Baz'),
164 transformer : function (val) {
166 '.id' : val.get_id(),
167 '.name' : new PropertyThunk (val, 'name'),
171 '#dogs' : new Collection ({
172 css_selector : '.table_row',
174 { '.sound' : "Bark" },
175 { '.sound' : "Woof" },
178 '#cats' : new Hierarchy ({
179 list_selector : '.list',
180 item_selector : '.item',
182 node : { '.name' : "Twinkles" },
184 { node : { '.name' : "Shnuckums" } },
186 node : { '.name' : "Bilbo" },
189 node : { '.name' : "Dweezil" },
191 { node : { '.name' : "Tabby" } },
194 { node : { '.name' : "Abraxas" } },
200 '#rooms' : new Hierarchy ({
201 list_selector : '.list',
202 item_selector : '.item',
204 node : { '.name' : "Ceiling" },
206 { node : { '.name' : "Basement" } },
208 node : { '.name' : "Garage" },
210 { node : { '.name' : "Root Cellar" } },
212 node : { '.name' : "Kitchen" },
214 { node : { '.name' : "Under The Stairs" } },
217 { node : { '.name' : "Bathroom" } },
225 $(document).ready(function () {
226 $('body').process_template(params);
232 <img id="logo" src="http://l.yimg.com/a/i/ww/beta/y3.gif" border="1" />
234 <div class="username">Foo</div>
236 <p id="user_quotation">Text goes here</p>
237 <div id="products" style="border: 1px solid grey; width: 250px">
238 <div class="row" style="border: 1px solid red; padding: 2px; margin: 2px;">
239 <span class="id">ID</span>
240 <span class="name">NAME</span>
244 <table id="dogs" border="1">
249 <tr class="table_row">
250 <td>My dog says <span class="sound">NAME</span></td>
257 <li class="item">My cat is named <span class="name">NAME</span></li>
262 <div class="list" style="padding-left: 10px">
263 <div class="item" style="padding-left: 10px">My room is <span class="name">NAME</span></div>
267 <div class="username">Foo</div>
269 <div class="copyright">Copyleft</div>