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.
The Knockout.js JavaScript library provides a cleaner way to manage these kinds of complex, data-driven interfaces. Instead of manually tracking which sections of the HTML page rely on the affected data, Knockout.js lets you create a direct connection between the underlying data and its presentation. After linking an HTML element with a particular data object, any changes to that object are automatically reflected in the DOM.
This allows you to focus on the data behind your application. After you set up your HTML templates, you can work exclusively with JavaScript data objects. With Knockout.js, all you have to do to remove an item from the shopping cart is remove it from the JavaScript array that represents the user’s shopping cart items. The corresponding HTML elements will automatically be removed from the page, and the total price recalculated.
Put another way, Knockout.js lets you design a self-updating display for your JavaScript objects.
Other Features
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…
Pure JavaScript
Knockout.js is a client-side library written entirely in JavaScript. This makes it compatible with virtually any server-side software, from ASP.NET to PHP, Django, Ruby on Rails, and even custom-built web frameworks.
When it comes to the front-end, Knockout.js connects the underlying data model to HTML elements by adding a single HTML attribute. This means it can be integrated into an existing project with minimal changes to your HTML, CSS, and other JavaScript libraries.
Extensible
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.
Utility Functions
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.
This high level of specialization makes Knockout.js compatible with any other client-side and server-side technology, but it also means Knockout.js often requires the cooperation of a more full-featured JavaScript framework. In this sense, Knockout.js is more of a supplement to a traditional web application stack, rather than an integral part of it.
When you're ready, move on to lesson one!
This lesson represents a chapter from Knockout Succinctly, a free eBook from the team at Syncfusion.
Comments