Element::chain

Method to activate the chaining / element rendering service.

Syntax

$(element).chain({arguments})

Routines

This method will execute different routines depending on the arguments passed.

chain()

If no argument is passed, it will activate the chain service and use the default updater/renderer.
The default updater will display all item’s data in nodes inside the element which has the same
class as the data’s property name.

$('<div><span class="name">Name</span></div>')
	.item({name: 'Steve Jobs'})
	.chain()
	.appendTo(document.body);

chain(object)

If you pass an object to chain, it will treated as a updater object.
The updater is a hash of selector and value string: chain({'my css selector': 'My Content String'})
or chain({'my css selector': {attributes}})

$('<div><div class="name"><span class="first">First</span> <span class="last">Last</span></div></div>')
	.item({first:'Steve', last:'Jobs'})
	.chain({
		'.name .first': {
			style: 'color: blue;',
			content: 'First Name: {first}'
		},
		'.name .last': 'Family Name: {last}'
	})
	.appendTo(document.body);

If you need a very custom updater, you can do this:

$('#contact')
	.chain({
		'.name': '{name}'
		'.address': function(data, el){
			if(!data.address)
				el.hide();
			else
				el.show();
			
			// the return will be appended as a text to the object
			return data.address;
		}
	})
	.appendTo(document.body);

Additionaly, you can add events, and do more using builder, like binding event

$('<div><div class="name">Name</div><div class="address">Address</div></div>')
	.item({name:'Steve Jobs', address:'Cupertino'})
	.chain({
		builder: function(){
			var data = this.item();
			this.find('.name').click(function(){alert(data.name)});
			this.find('.address').mouseout(function(){alert(data.address)});
		},
		'.name': '{name}',
		'.address': '{address}'
	})
	.appendTo(document.body);

chain(function)

if you pass a function to chain, it will be handled as {builder: function}, enabling you to use
the default updater while customizing the events etc.

$('<div><div class="name">Name</div><div class="address">Address</div></div>')
	.item({name:'Steve Jobs', address:'Cupertino'})
	.chain(function(){
		this.bind('click', function(){
			var data = this.item();
			alert('name:'+data.name+', address:'+data.address);
		});
		
		// if you return false, default builder wont be executed
		// You don't have to return true;
		return true;
	})
	.appendTo(document.body);

chain('anchor')

If you use items() with chain(), you can use chain('anchor', selector) to move the element,
where the items will be generated.

$('#persons').chain('anchor', '.wrapper');

// Define Anchor directly while building
$('#persons').items([...]).chain({anchor:'.wrapper', builder: ...});

chain('template')

Use chain('template') to get the stored template.

chain('active')

Use chain('active') to check whether chaining has been activated or not.