Introducing knockout

JavaScript does not natively support the kind of loose coupling that the MVVM
pattern requires. Therefore, additional support must be introduced in
the form of a third-party library. Although there are many third-party
libraries available for JavaScript, few of them implement the MVVM
pattern. One library that does implement it successfully is Knockout, which you can find at http://knockoutjs.com.

Knockout is a JavaScript library that you can add to your apps
to implement the MVVM pattern. With Knockout, you can create ViewModel
components in JavaScript that effectively bind the server-side
SharePoint data sources to the webpages in your apps. The primary
capabilities of Knockout that makes the MVVM pattern possible are
declarative bindings and dependency tracking.

Declarative bindings make it possible for you to bind a ViewModel to HTML
elements in a webpage. Instead of writing HTML elements in your
JavaScript, the declarative bindings are defined within the app web
page. This approach removes the knowledge of the webpage structure from
the JavaScript code and creates the loose binding required by MVVM. Example 2 presents an example of declarative bindings in Knockout.

In Example 2, the data-bind attribute binds a method from the ViewModel to HTML elements in the webpage. Note how the table body uses a foreach construct to iterate through a set of contacts returned from the get_contacts
method and build a table row for each contact. The last name, first
name, and phone number associated with each contact is then bound to a
table cell within a row.

When you develop a ViewModel, you start by creating a library to hold the data for binding. Example 3 shows a JavaScript library
that holds the data for an individual contact. Note how the properties
of the contact are exposed through public methods, and these methods
are the ones referenced in the associated HTML of Example 2.

The associated ViewModel performs the queries against the back-end
data source and populates the data objects. The ViewModel also provides
the public interface that is referenced in the data-bind attribute of the HTML for retrieving the collection of list items. Example 4 demonstrates a complete ViewModel that queries a contacts list and creates an array of contact information.

The difference between Example 4 and Example 1 is significant. Example 1
relies on intimate knowledge of the user interface to create a table
and push it onto the webpage for display. The ViewModel in Example 4
simply creates an array of contacts. You can then easily bind this
array to various display forms such as a table or unordered list.

The most important aspect of the ViewModel is its use of the ko.observableArray type for handling the collection of contacts. The Knockout library provides the ko.observableArray
type specifically to implement dependency tracking. With dependency
tracking, automatic updating of the user interface occurs whenever data
elements in the array change. When your app initializes, it should load
the observable array and then bind the data. Knockout initializes the data binding when you call the applyBindings method. Example 5 illustrates how to initialize the data bindings with the ViewModel.