At the end of this article, the reader will understand what MVVM is, why it is useful, and how open source JavaScript frameworks like Knockout can help deliver MVVM applications.

 

Topics covered in this article:

• What is MVVM

• Benefits of MVVM

• How to implement data binding in a jQuery application using Knockout

What is MVVM?

The Model-View-View Model (MVVM) pattern is a software architectural design pattern. This pattern emerged in 2005 to support the inherent data binding functionality offered by XAML subsystems such as Windows Presentation Foundation (WPF) and Silverlight.

Elements of the Pattern

The three elements or “layers” of the pattern will be described in this section.

Model

The Model encapsulates the domain model, business logic and may include data access.

The domain model represents the client-side application model and may define supporting data structures such as business objects. An example of such structures is a Customer object containing properties such as FirstName, LastName, etc.

 

 

 

 

 

 

Figure 1

Business logic refers to logic concerned with retrieving, validating and ensuring the consistency of application data. This excludes UI-specific logic.

View

The view is the application’s User Interface (UI). It defines the appearance of the UI and its visual elements and controls such as text boxes and buttons. The view may also implement view behaviour such as animations and transitions.

 

 

 

 

 

 

 

 

 

 

Figure 2 – View Example

 

View Model

The view model is responsible for holding application state, handling presentation logic and exposing application data and operations (commands) to the view such as LoadCustomers and SaveCustomers. It acts as the intermediary between the view and model. The view model retrieves data from the model and exposes it to the view as properties in a form that the view can easily digest.

Figure 3 – View Model

How all of the these Elements Work Together

Basics

This section will explain the basic sequence of steps involved in a typical MVVM application. Please keep in mind that the order and specific operations of production applications will vary based on application complexity and functionality.

Step 1: View Model Retrieves Data from Model

The view model retrieves data from the model or a data service. It then converts the data into a format that the view can easily display. The converted data is stored within structures of the view model and exposed to the...