Thursday, August 21st, 2008
Chain.js: jQuery Data Binding Service
Category: jQuery
A simple example shows you where to start. When given HTML like:
The following JavaScript will add data as items to the list:
JAVASCRIPT:
-
-
$('#quickdemo')
-
.items([
-
{library:'Prototype'},
-
{library:'jQuery'},
-
{library:'Dojo'},
-
{library:'MooTools'}
-
])
-
.chain();
-
Check out the demos for more detailed examples.
Related Content:
4.5 rating from 38 votes
That’s pretty neat. I like it. Nice and simple.
Really nice work!
Will for sure use this in many of my future projects.
Thanx for sharing!
Looks interesting, but what’s with all the inline styles it’s creating??
@jlbruno
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.
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!
Really nice piece of code. Just what I was looking for. Already started to implement it in a project. Thanks!
This looks great! I wonder if I could hook this up with taffydb…
Guys, why not give a try to “jQuery micro template”?
http://plugins.jquery.com/project/micro_template
It’s more flexible than Chains.js, and need not seperate template container like Trimpath etc.
Example:
<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>
<!}!>
</div>
var data5=[{bid:2.3}, {bid:5.3}, {bid:0.9}];
$('#test5').drink(data5);
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:
http://jsrepeater.devprog.com/
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”.