Thursday, August 21st, 2008

Chain.js: jQuery Data Binding Service

Category: jQuery

<p>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:

< view plain text >
  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.

Related Content:

  • Binding XML to Java
    Manipulating XML data easily and efficiently in Java remains an important problem. Numerous approaches to XML binding exist in the industry, including...
  • Part 4 - Web Services and J2EE
    Welcome to the fourth installment in our series of articles explaining how to use and consume Web services. In previous articles we've learned how to...
  • Requirements for Building Industrial Strength Web Services
    Anybody who thinks that buying an application server (such as WebSphere or WebLogic), combined with a Web Services toolkit (like GLUE, as good as it...
  • EJB 2.1 Web Services (Part 1)
    The driving force behind EJB 2.1 is the need for Enterprise JavaBeans technology to support Web services -- a need that in turn is driven by...
  • Part 6 - Securing Web Services with Single Sign-On
    Web Services are arguably the most heterogenous distributed technology ever. A typical Web services setup will make use of many different...

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.