Rizqi Ahmad, a high-school student in Germany, created a pretty useful data binding service for jQuery called Chain.js. It allows you to easily manipulate data driven content from javascript by directly manipulating the DOM, without resorting to templates or a lot of complicated code. You create the markup the way you want the data to display, give class names to DOM elements that should have their content substituted, and pass an associative array containing the variable data to the chain() method.
There is also support for managing lists of elements, allowing you to add and remove elements dynamically inside the defined markup. Rizqi also created the Interaction library that works on top of the data binding library to provide drag, drop, and sort support for lists.
Make sure to check out his demos. They show off some of the flexibility of the library and they’re easy to tweak for your own needs.
Data Binding Solution for jQuery
Chain.js – Data Binding Service for jQuery
Interaction.js – drag/drop/sort support for Chain.js
2 thoughts on “Chain.js – data binding for jQuery”
Comments are closed.
ADVERTISEMENT
Join Make: Community Today
I have encountered the sort of problems that I am sure Rizqi must have encountered which lead him to the creation of this plugin.
No-one wants to write hundreds of lines of code just to fill a div with javascript data so we are all looking for the optimal declerative template solution.
I have put together a javascript library that allows you to:
1. Bind simple objects to a template
2. Bind whole hierachies of objects to a template
3. Provides functionality for formatting of input data and numbering
4. Provides recursive templates.
It is freely available for anyone to use. You might want to have a look at it:
http://jsrepeater.devprog.com/
It also contains examples of using it for formatting Google Feeds and the result of the Google Search API.