Home

Data binding

Data binding is a method for automatically reflecting changes in an object in the gui. This reduces the amount of coding needed in many situations. Design patterns like MVC (Model-View-Controller) and MVVM (Model-View-Viewmodel) are often used in combination with data binding.

It is actually simpler that you might think to roll this on your own. Here is an example where JavaScript setters are used. All the user has to do is to add the extra attribute data-bind='property name' to the DOM elements you need, call createUIObject and voilá an object with the specified properties is created.

Here is an example (make sure to show the developer console).

Grids are often use to display large amount of data. I've put together a simple data grid with data binding based on HTML tables. Here is the source (make sure to show the developer console).

Compability

Extending NodeList and NamedNodeMap don't work in IE6/7/8. Just implement this with traditional loops instead.

• Property setters and gettes are used. Works with IE9, Safari5, FF4, Chrome5 and Opera12 according to this site.

Alternative solutions

• Knockout
• Anglular
• React
• Backbone is one of the first libraries that became popular for JavaScript apps.