KnockoutJS: An MVVM framework for jQuery developers

KnockoutJS: An MVVM Framework for jQuery Developers

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.


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.


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


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...

By Jason Beres, 13 December 2012, 0 comments. Categories: Design, Development Tools, Java, Languages.

Your bumper guide to working with media in HTML5

Unless you’ve been living on a remote island for the past year or so, you’ve probably heard the buzz and hype around HTML5.  HTML5 will cure most illnesses; it will solve world hunger; and it sounds the death knell for RIA (Rich Internet Applications) technologies like Silverlight, Flash and Flex.  Though that might sound extreme, the hype over this new HTML standard has been overwhelming.  Let’s bring things back down to earth a bit. To scope what’s important,...

By Jason Beres, 25 May 2012, 0 comments. Categories: HTML5, Languages.