Thursday, August 21st, 2008

Chain.js: jQuery Data Binding Service

Category: jQuery

Rizqi Ahmad has created a data binding service for jQuery called Chain.js.

A simple example shows you where to start. When given HTML like:

  1. <div id="quickdemo">
  2.     <div class="item"><span class="library">Library Name</span></div>
  3. </div>

The following JavaScript will add data as items to the list:


  1. $('#quickdemo')
  2.     .items([
  3.         {library:'Prototype'},
  4.         {library:'jQuery'},
  5.         {library:'Dojo'},
  6.         {library:'MooTools'}
  7.     ])
  8.     .chain();

Check out the demos for more detailed examples.

Posted by Dion Almaer at 1:43 am

4.3 rating from 43 votes


Comments feed TrackBack URI

That’s pretty neat. I like it. Nice and simple.

Comment by Nosredna — August 21, 2008

Really nice work!
Will for sure use this in many of my future projects.
Thanx for sharing!

Comment by Iumentum — August 21, 2008

Looks interesting, but what’s with all the inline styles it’s creating??

Comment by jlbruno — August 21, 2008

Chain.js doesn’t have anything to do with styling. The inline styles are only in the demo, because of the limitation of the wiki at the github.

Comment by rizqi — August 21, 2008

I haven’t tried it yet, but by just looking at the demos I can say that this is a great piece of code you’ve written! I’m sure it will be very useful for me. I can see it used in a very flexible selectbox, with filtering etc…
Thank you!

Comment by tidelipop — August 21, 2008

Really nice piece of code. Just what I was looking for. Already started to implement it in a project. Thanks!

Comment by zwaugh — August 21, 2008

This looks great! I wonder if I could hook this up with taffydb…

Comment by rubyred — August 21, 2008

Guys, why not give a try to “jQuery micro template”?
It’s more flexible than Chains.js, and need not seperate template container like Trimpath etc.

<div id="test5" class="bids">
<!for (var i=0;i<json.length;++i){!>
Bid price:<span *="<!if (json[i]['bid']%3e=1) {write.push('style=%22color:red;'+(json[i]['bid']%3e=5?'font-weight:bold;':'')+'%22');}!>*="><!=json[i]['bid']!></span><br>
var data5=[{bid:2.3}, {bid:5.3}, {bid:0.9}];

Comment by diyism — September 5, 2008

Just a quick post to mention that there is an alternative templating solution.

jsRepeater is a templating solution that provides for binding to an entire hierarchy, alternation, output formatting as well as recursive databinding.

It has been created to be easy to use with the minimum amount of javascript. Let’s face it, a template is supposed to allow us to say “I want this here” instead of having to write javascript that says “Put this there”.

If you would like to check it out there is a site dedicated to it at:

Comment by ShawnS — September 20, 2008

I don’t find this solution particularly well for templating. As far as I am concerned, a template engine should really do nothing more than replace placeholders with values. If I want sorting functionality on items or UI markup, there are plenty of plugins for that. I also find it odd to use class property as a mechanism to identify and replace the inner html content of a tag. Classes are not meant for that purpose. If you need to use a property to identify tags that get their inner html replaced, create a unique property name like “FieldVal”.

Comment by Polaris431 — February 10, 2010

Leave a comment

You must be logged in to post a comment.