Knockout implements the MVVM design pattern. It is imperative to understand the basic concept behind MVVM before we dive into Knockout. This will help us grasp how two-way binding is implemented in Knockout and what are its benefits.
MVVM is a design pattern that lets you decouple your UI elements from your application logic and data. It lets you define data binding to link the UI elements to the data. The data bindings provides loose coupling and keeps the data in sync with the UI elements. The MVVM pattern provides clear separation of concerns between UI elements, application logic, and the data.
The three main components of this pattern are:
The model is a domain object, which holds the data and domain-specific logic. An example of a model could be of a contact in an address book, containing contact ID, name, and phone number. The following is an example of a contact model in JavaScript:
var contact = {
id: 1,
name: 'John',
phoneNumber: '00 11 000000'
};The model should not contain any application logic such as service calls. The model can contain business-specific logic that is independent of the UI. Separating business logic from UI makes the code more maintainable and testable.
Note
The contact object in the given example is declared as an object literal, which uses Java Script Object Notation (JSON). It is important to familiarize yourself with this notation if you are not. You can find more on this topic at http://json.org/.
The view model holds the model and any application logic such as adding or removing data or making service calls to retrieve or storing data from server-side data repositories. The following is an example of a view model that holds a contact and provides method to retrieve the contact from a server-side data repository:
var contactViewModel = {
var contact = {
id: 1,
name: 'John',
phoneNumber: '00001111'
};
Var retrieveContact = function (){
/* logic to retrieve contact form server side data repository */
};
Var updateContact = function (newPhoneNumber){
/* logic to update the contact with new phone number */
};
};The view model itself does not have any concept of the HTML elements, button-click event, or how the data in the model should be displayed. It simply holds the data model and a set of actions in the form of functions that manipulate the data.
In the preceding example, contactViewModel holds the contact model. It also has two functions that are used to manipulate the contact model. The retrieveContact function, which is used to retrieve a contact from the server-side, and the updateContact function, which is used to update the contact with a new phone number.
The view is what the end user sees and interacts with on the screen. The view is a representation of the data contained in the model. The view also provides a mechanism to interact with the model. In our example, the model contains a contact. The view can display the contact and provide HTML elements such as buttons to retrieve and update the contact.
In Knockout, the view is the HTML with data bindings that link the view to the view model. The following HTML displays the contact name and phone number:
The phone number for <span data-bind="text: name"></span> is <span data-bind="text: phoneNumber"></span> <button data-bind="click: retrieveContact">Load Contact</button>
In the preceding example, the contact name and phone number are being displayed using the text binding. Click binding is used to link the Load Contact button to retrieveContact function in our view model. We will explore bindings in much more detail later on.
The following figure depicts the relationship between view, model, and view model:
In the preceding figure, the view model holds the state of the model and provides behavior to the view. The view binds with the model and this keeps the view and the model in sync. The view also binds with the view model for operations, for example, the behavior to load contacts. The view model uses the model to manipulate the data. For example, the retrieveContact function retrieves a contact and sets it in the model.