Advertisement
JavaScript & AJAX

Conceptual Overview

by

Knockout.js uses a Model-View-ViewModel (MVVM) design pattern, which is a variant of the classic Model-View-Controller (MVC) pattern. As in the MVC pattern, the model is your stored data, and the view is the visual representation of that data. But, instead of a controller, Knockout.js uses a ViewModel as the intermediary between the model and the view.

The ViewModel is a JavaScript representation of the model data, along with associated functions for manipulating the data. Knockout.js creates a direct connection between the ViewModel and the view, which is how it can detect changes to the underlying data and automatically update the relevant aspects of the user interface.

Figure 5: The Model-View-ViewModel design pattern

The MVVM components of our shopping cart example are listed as follows:

  • Model: The contents of a user’s shopping cart stored in a database, cookie, or some other persistent storage. Knockout.js doesn’t care how your data is stored—it’s up to you to communicate between your model storage and Knockout.js. Typically, you’ll save and load your model data via an AJAX call.
  • View: The HTML/CSS shopping cart page displayed to the user. After connecting the view to the ViewModel, it will automatically display new, deleted, and updated items when the ViewModel changes.
  • ViewModel: A pure-JavaScript object representing the shopping cart, including a list of items and save/load methods for interacting with the model. After connecting your HTML view with the ViewModel, your application only needs to worry about manipulating this object (Knockout.js will take care of the view).

Observables

Knockout.js uses observables to track a ViewModel’s properties. Conceptually, observables act just like normal JavaScript variables, but they let Knockout.js observe their changes and automatically update the relevant parts of the view.

Figure 6: Using observables to expose ViewModel properties

Bindings

Observables only expose a ViewModel’s properties. To connect a user interface component in the view to a particular observable, you have to bind an HTML element to it. After binding an element to an observable, Knockout.js is ready to display changes to the ViewModel automatically.

Figure 7: Binding a user interface component to an observable property

Knockout.js includes several built-in bindings that determine how the observable appears in the user interface. The most common type of binding is to simply display the value of the observed property, but it’s also possible to change its appearance under certain conditions, or to call a method of the ViewModel when the user clicks the element. All of these use cases will be covered over the next few lessons.


Summary

The Model-View-ViewModel design pattern, observables, and bindings provide the foundation for the Knockout.js library. Once you understand these concepts, learning Knockout.js is simply a matter of figuring out how to access observables and manipulate them via the various built-in bindings. In the next lesson, we’ll take our first concrete look at these concepts by building a simple “Hello, World!” application.

This lesson represents a chapter from Knockout Succinctly, a free eBook from the team at Syncfusion.

Related Posts
  • Code
    JavaScript & AJAX
    Accessing External DataKnockoutjs
    For most web applications, collecting user input is relatively useless if you can’t pass that data along to a server. In this lesson, we’ll learn how to send and receive information from a server using AJAX requests. This puts the model back into the Model-View-ViewModel design pattern underpinning Knockout.js.Read More…
  • Code
    JavaScript & AJAX
    Interactive BindingsKnockoutjs
    Form elements are the conventional way to interact with users through a webpage. Working with forms in Knockout.js is much the same as working with appearance bindings. But, since users can edit form fields, Knockout.js manages updates in both directions. This means that interactive bindings are two-way. They can be set programmatically and the view will update accordingly, or they can be set by the view and read programmatically.Read More…
  • Code
    JavaScript & AJAX
    Appearance BindingsKnockoutjs
    In the previous lesson, we saw how Knockout.js’ control-flow bindings provide a basic templating system for view code. Control-flow bindings provide the visual structure for your application, but a full-fledged templating system needs more than just structure. Knockout.js’ appearance bindings give you precise control over the styles and formatting of individual elements.Read More…
  • Code
    JavaScript & AJAX
    Control-Flow BindingKnockoutjs
    As we’ve seen in previous lessons, designing a view for a ViewModel is like creating an HTML template for a JavaScript object. An integral part of any templating system is the ability to control the flow of template execution. The ability to loop through lists of data and include or exclude visual elements based on certain conditions makes it possible to minimize markup and gives you complete control over how your data is displayed.Read More…
  • Code
    JavaScript & AJAX
    Knockout ObservablesKnockoutjs
    We’ve seen how observable properties let Knockout.js automatically update HTML elements when underlying data changes, but this is only the beginning of their utility. Knockout.js also comes with two more ways of exposing ViewModel properties: computed observables and observable arrays. Together, these open up a whole new world of possibilities for data-driven user interfaces.Read More…
  • Code
    JavaScript & AJAX
    Hello, KnockoutKnockoutjs
    This lesson is designed to be a high-level survey of Knockout.js’ main components. By implementing a concrete sample application, we’ll see how Knockout’s ViewModel, view, observables, and bindings interact to create a dynamic user interface.Read More…