Chain.js v0.2 – Updated Examples

2

Posted on : 09/09/2008 | By : Jimmy Vu | In : Solution

In previous post, I had a chance to introduce Chain.js with 3 examples and found a few issues due to both bugs in version 0.1 and my unawareness of implemented features. Now version 0.2 of Chain.js has just come out, I’d like to revise the examples to show better implementation we can do with the library in practice.

Basically, we don’t need to call chain() function every time we add or replace items instead just execute it once on DOM ready event, and we can utilize anchor property to define where items to be rendered within table tag.

Example 1: All codes to get it works are here.

1
2
3
4
5
6
7
8
9
10
11
12
13

function render(){
	$.getJSON('json.php', 'lang=' + $('#langList').val(), function(books){
		$('#table_book').items('replace', books);
	});
}
 
$(document).ready(function(){
	$('#table_book').chain({
		anchor: 'tbody' /* defines, where items will be rendered*/
	});
	$('#langList').change(render); 	// handle change event of drop-down list
	setTimeout(render, 100); 		// call render function on load
});

Example 2: Almost the same codes as example 1 plus add, remove and sort functions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function render(){
	$.getJSON('json.php', 'lang=' + $('#langList').val(), function(books){
		$('#table_book').items('replace', books);
	});
}
 
function addData(){
	var data = {title: $('#input_title').val(),
		publisher: $('#input_publisher').val(),
		price: $('#input_price').val()};
 
	$('#table_book').items('add', data);
}
 
function sortBy(col){
	$('#table_book').items('sort', col, {toggle:true});
}
 
$(document).ready(function(){
	$('#table_book').chain({
		anchor: 'tbody', /* defines, where items will be rendered*/
		bind: function(){ /* bind event */
			this.dblclick(function(){
				$(this).item('remove');
			});
		}
	});
 
	$('#langList').change(render); 	// handle change event of drop-down list
	setTimeout(render, 100); 		// call render function on load
});

Example 3: Custom data binding looks much easier now.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function render(){
	$.getJSON('json.php', 'lang=' + $('#langList').val(), function(books){
		$('#table_book').items('replace', books);
	});
}
 
$(document).ready(function(){
	/* Custom data binding */
	$('#table_book').chain({
		anchor : 'tbody', /* defines, where items will be rendered*/
		'.price' : {
			style: 'text-align: right',
			content: '${price.toFixed(2)}'
		},
		'.order .order-link': {
			style: 'color: red;',
			href: '{orderLink}',
			target: '_blank',
			content: 'Order Now!'
		}
	});
 
	$('#langList').change(render); 	// handle change event of drop-down list
	setTimeout(render, 100); 		// call render function on load
});

Thanks Rizqi Ahmad for kind support to complete these examples.

Download updated example codes

Related Reading:

Share this :

  • Stumble upon
  • twitter

Comments (2)

Chain.js Template Engine – Update Examples (v0.2) » JavaScriptly | My Web Development Bookmarks said on 09-10-2009

[...] See the article here: Chain.js Template Engine – Update Examples (v0.2) » JavaScriptly [...]

Sam Mueller said on 23-10-2008

I touch a bit on the strengths and weaknesses of Chain.js in a blog post of mine:

http://samuelmueller.com/post/2008/10/20/Client-side-templates-using-ASPNET-JQuery-Chain-and-TaffyDB.aspx