Skip to content

Home

Jump to bottom Edit New page
raid-ox edited this page Sep 13, 2010 · 80 revisions

Chain.js – Data Binding Service for jQuery

Chain.js is a jQuery plugin, providing unobtrusive data-binding capability that allows you to generate web contents automatically by binding your data to html. Unlike other data-binding frameworks and library, it uses pure DOM, instead of string-based innerHTML approach, so event binding won’t disappear during rendering. This library can also be very helpful if you strictly separate your data from your HTML, e.g. developing using MVC-Pattern. Although simple, it is actually powerful and can be very useful for various projects. Have a look at our Demos and be sure to read our Quick Start below.

Download

Click here to download the latest stable release of chain.js (v0.2).

NEW Interaction extension for chain.js here. A very useful companion for chain.js.

Chain.js is an open source library, licensed under the very liberal MIT License. You can use it as you want.

API Documentation and Reference

NEW: Auto-Generated Documentation

HowTos and Helps

Visit the HowTo page for tutorials. If you are looking for specific helps, or if you want to give some suggestions please join our mailing list. Visit my site!

Quick Demo

Library Name

HTML:

<div id="quickdemo">
	<div class="item"><span class="library">Library Name</span></div>

Javascript:
$('#quickdemo')
	.items([
		{library:'Prototype'},
		{library:'jQuery'},
		{library:'Dojo'},
		{library:'MooTools'}
	])
	.chain();

Quick Start

Download & Install!

To use chain get the latest chain.js stable release.
Follow the instructions in readme.txt, then return here.

Then, put jquery-<version>.js from /lib folder and chain.js from /build (!) folder into a folder in your website.

After that put this code in the <head> of your page:



<script src="path/to/your/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="path/to/your/chain.js" type="text/javascript" charset="utf-8"></script>

Now, you are ready to use chain.js

Populating Your Page with Data

Chain.js makes it easy to fill HTML Page with data, try this simple example: see demo



<div id="contact">
	<div class="name">My Name</div>
	<div class="address">My Address</div>
	<div class="country">Unknown Country</div>





$('#contact')
	.item({
		name: "Rizqi Ahmad",
		address: "Somestrasse 50, Hamburg",
		country: "Germany"
	})
	.chain();

So, the code contains two functions: item() and chain().

You can use item({data}) to insert data to to an element. To get the data simply call item() without arguments.
There are more things you can do with item(), just take a look at the doc.

use chain() to enable the chain data-binding system. Without invoking chain, all chain.js functionalities will be useless. You only have to call chain() once. After that you only need to invoke item({my other data}) to change your data, and the element will be automatically updated.

Using Custom Builder

Actually if you invoke chain() without any argument, it will use the default builder to render the element. The default builder, analyze the data and search nodes that has the same class as the data’s property and fill them with the values. You can pass a custom builder like this: see demo



$('#contact')
	.item({
		name: "Rizqi Ahmad",
		address: "Somestrasse 50, Hamburg",
		country: "Germany"
	})
	.chain({
		'.name': 'Hello, My Name is {name}',
		'.address': 'My address is {address}',
		'.country': 'It is in {country}'
	});

There are some more cool things you can do with custom builder. see doc.

Array of Data with items()

You can do the same as above with an array of data. All you need to do is using items() instead of item(), and create an item wrapper in your HTML like this: see demo

<div id="persons">
	<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>

$('#persons')
	.items([
		{first:'Isaac', last:'Newton'},
		{first:'Johannes', last:'Keppler'},
		{first:'Alessandro', last:'Volta'},
		{first:'Blaise', last:'Pascal'}
	])
	.chain();

Make sure that you don’t forget the item wrapper element (in this case <div class="item">).

Adding & Removing Items

Using items() you can also add or remove items. You don’t need to call chain() again.
Each time the data is altered, the templates will automatically be updated. see demo

// Adding more items
$('#persons').items([
	{first:'Niels', last:'Bohr'},
	{first:'Albert', last:'Einstein'}
]);

// This is the same as above
$('#persons').items('merge', [
	{first:'Niels', last:'Bohr'},
	{first:'Albert', last:'Einstein'}
]);

// Replace with new data
$('#persons').items('replace', [
	{first:'Niels', last:'Bohr'},
	{first:'Albert', last:'Einstein'}
]);

var data = {first:'Stephen', last:'Hawking'};

// Add one item
$('#persons').items('add', data);

// Remove data, data should be THE SAME OBJECT as the data inserted
$('#persons').items('remove', data);

More on items() can be seen here.

Next?

Don’t worry, this is just the beginning. For more Tips and Tricks go to HowTo. And don’t forget to take a look at the API Documentation.

Add a custom footer
Add a custom sidebar

Clone this wiki locally