Chain.js v0.2 – Updated Examples 09.09.08

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.

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.

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.

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
});