Creating data-driven user interfaces is one of the most complex jobs of a web developer. It requires careful management between the interface and its underlying data. For example, consider a simple shopping-cart interface for an e-commerce website. When the user deletes an item from the shopping cart, you have to remove the item from the underlying data set, remove the associated element from the shopping cart’s HTML page, and update the total price. For all but the most trivial of applications, figuring out which HTML elements rely on a particular piece of data is an error-prone endeavor.
But, that’s not all Knockout can do. In addition to automatic dependency tracking, it boasts several supporting features for the rapid development of responsive user interfaces…
While Knockout.js ships with almost two dozen bindings for defining how data is displayed, you may still find yourself in need of an application-specific behavior (e.g., a star-rating widget for user-submitted movie reviews). Fortunately, Knockout.js makes it easy to add your own bindings, giving you complete control over how your data is transformed into HTML. And, since these custom bindings are integrated into the core templating language, it’s trivial to reuse widgets in other parts of your application.
Knockout.js comes with several utility functions, including array filters, JSON parsing, and even a generic way to map data from the server to an HTML view. These utilities make it possible to turn large amounts of data into a dynamic user interface with just a few lines of code.
What Knockout.js is Not
Knockout.js is not meant to be a replacement for jQuery, Prototype, or MooTools. It doesn’t attempt to provide animation, generic event handling, or AJAX functionality (however, Knockout.js can parse the data received from an AJAX call). Knockout.js is focused solely on designing scalable, data-driven user interfaces—how that underlying data is obtained is completely up to you.
When you’re ready, move on to lesson one!