Data binding with custom attributes

A great use for custom data attributes is to implement data binding. Data binding allows us to map user controls in the DOM to fields in the data model so that they are automatically updated when the user changes them. Using this technique we can eliminate a lot of boring repetitive code that does nothing more than handle events and map fields in the view to fields in the model.

Note

There are a few excellent data binding libraries available for JavaScript, including Backbone.js and Knockout. We will implement our own simple data binding here to learn how to use custom attributes. If you find yourself building an application with a lot of data you might consider using one of these libraries.