Knockout.js

Knockout.js released by Steve Sanderson in summer of 2010. Although Steve works for Microsoft the decision to release knockout.js as an open source project was right.

It is a standalone javascript library relying on MVVM and Observable patterns. The key principles of knockout.js are:

* a clear separation between domain data, view components and data to be displayed
* the presence of a clearly defined layer of specialized code to manage the relationships between the view components

These features streamline and simplify the specification of complex relationships between view components, which in turn make the display more responsive and the user experience richer.

Knockout.js includes the following features:

* Declarative bindings
* Automatic UI refresh (when the data model’s state changes, the UI updates automatically)
* Dependency tracking
* Templating (using a native template engine although other templating engines can be used

In this example, two text boxes are bound to observable variables on a data model. The “full name” display is bound to a dependent observable, whose value is computed in terms of the observables. When either text box is edited, the “full name” display is automatically updated, with no explicit event handling.

HTML code snippet:

   

First name:

Last name:

Hello, !

Javascript code snippet:

function ViewModel() {
    this.firstName = ko.observable("John");
    this.lastName = ko.observable("Smith");
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
}
 
ko.applyBindings(new ViewModel());