Knockout.js

Chapter 4. Dynamically Changing Properties

So far, we’ve only touched on a small piece of the KnockoutJS framework. In this chapter, we’ll start taking advantage of properties that change dynamically through user interaction.

Knockout calls these properties observables. When you define a variable or property as an observable, Knockout tracks when it changes. This can be used in a variety of different ways that we’ll see in the next few chapters.

Defining an Observable

There are three different types of observables that are most commonly used. The first, shown in Example 4-1, is an observable variable.

Example 4-1. Creating an observable variable

var myObservable = ko.observable();
myObservable('Hello');

alert(myObservable());

To create an observable, assign the ko.observable function to the variable. A default value can be specified in the constructor of the call. Knockout then converts your variable into a function and tracks when the value changes, in order to notify the UI elements associated with the variable.

Accessing an Observable

After an observable is defined, it needs to be called like a function in order to get or set its value. If you try setting it directly as if it were a variable, the observable would be destroyed.

In Example 4-1, notice how the setting of the variable is done like a function. When accessing the value for the alert statement, this is also done. If you were to attempt to alert the observable without the brackets, it would output a large chunk ...