Site Loading

An introduction to KnockoutJS Observables

2378867408_4cc90791d6_mWhat are observables

Observables are core to the KnockoutJs javascript library.  The basic explanation of an observable is that they are functions.  If you had a simple JSON person model:

 

 

var person = {firstName:"John", lastName:"Doe"}

To convert this JSON model to an observable you call the following function:

var personObservable = ko.fromJSON(person);

When you converted this model to an observable it would create functions for the properties in the JSON model. To set or get the value of the property you do by using the “()” at the end of the property name.

personObservable.firstName("Jack");

If you were to try and access the firstName property on the observable it would return the function rather than the value.

Binding your observable to the UI

One of the amazing functions of Knockout is that it can be bound to DOM elements and keep track of the value of the property.  In the case of the personObservable we could create a page that has an input for first name and last name and use knockout to keep track of what the user types in.  We would do this using the data-bind keyword on the element:

<input type="text" id="firstName" data-bind="value: firstName"/>
<input type="text" id="lastName" data-bind="value: lastName"/>

Now when the user types in “jack” in the first name input that the corresponding property personObservable.firstName is updated.

Computed observables

If you need to keep track of a property and perform an action automatically you could use computed observables.  These observables set up dependencies on other observables based on the rules you specify.  Consider when we want to show a person’s age base on a date of birth they entered in we could do the following:

var computedAge = ko.computed(function(){
var difference = Date.now() - this.birthday.getTime();
var ageDate = new Date(difference); // milliseconds from epoch
return Math.abs(ageDate.getUTCFullYear() - 1970);
});

Please note I used an answer on Stack overflow to get the age calculation: http://stackoverflow.com/a/21984136/343088

In the example above whenever computedAge is called in the UI it would call the function above and would use the up to date value of the birthday in the person observable.

Observable Arrays

If you want to keep tabs on multiple observables you can do this using observable arrays.  They work in much the same way that a normal array works.

array.push('value');

To use an existing array you would use the following:

var array = ['first value', 'second value'];
var observableArray = ko.observableArray(array);

Please note that when you use the array to do work with you need to use the () at the end of the variable name since all observables are functions for example to get the ‘first value’ element:

observableArray()[0];

You wont need to do this with knockout functions.  For example when pushing a value onto the array you would go:

observableArray.push('third value');

And removing the last added value:

observableArray.pop();

Photo Source: flickr

Close