KnockoutJS: An MVVM Framework for jQuery Developers
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.
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
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...