Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
7 views3 pages

Knockoutjs Succinctly

Knockout.js employs the Model-View-ViewModel (MVVM) design pattern, where the ViewModel serves as an intermediary between the model and the view, allowing for automatic updates of the user interface. It utilizes observables to track changes in ViewModel properties and bindings to connect these properties to user interface components. Understanding these foundational concepts is essential for effectively using Knockout.js, which will be further explored in the next chapter with a practical application.

Uploaded by

rnrinfo2014
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views3 pages

Knockoutjs Succinctly

Knockout.js employs the Model-View-ViewModel (MVVM) design pattern, where the ViewModel serves as an intermediary between the model and the view, allowing for automatic updates of the user interface. It utilizes observables to track changes in ViewModel properties and bindings to connect these properties to user interface components. Understanding these foundational concepts is essential for effectively using Knockout.js, which will be further explored in the next chapter with a practical application.

Uploaded by

rnrinfo2014
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

1

Chapter 1 Conceptual Overview


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.

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

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 chapter, we’ll take our first concrete
look at these concepts by building a simple “Hello, World!” application.

15

You might also like