Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

codeA guest post by Ryan Niemeyer, who has over 15 years of experience in the software industry working with primarily web-based technologies. He loves JavaScript, participating in the open source community, and trying to learn new things everyday. He is always willing to lend a helping hand to anyone that needs it. Since, 2010 Ryan has been involved with the Knockout.js project and writes about his experiences with it on his blog ( He is a JavaScript Engineer for appendTo.
Computed observables are one of the fundamental building blocks of any Knockout.js application. While they are typically used to return a calculated value based upon one or more other observables, there are many other scenarios where computeds are an appropriate tool. Computed observables also accept a number of lesser-known options that help to customize their behavior.

The basics

A common example of an appropriate situation for a computed is where you need to return a calculated value such as a total based on other values. For example, you may want to compute a total property based upon a price observable and a fixed taxRate. Whenever price is modified, the total computed observable is kept up-to-date and notifies any subscribers on each change.

Intercepting writes

Computed observables are normally read-only. They return a value and keep that value current as dependencies change. However, you can optionally supply a write function upon creation that is used to intercept any values written to it. A computed has nowhere to store this value though, so the job of the write function is typically to update one of more other observables that are dependencies of the read function, causing the computed to be re-evaluated:

Tracking multiple dependencies

Observables and computeds expose a subscribe function that can be used to create manual subscriptions. In some scenarios though, subscribing to multiple observables at one time might be more convenient. Since computeds track all dependencies that are accessed during evaluation, it is easy to trigger code that runs when any one of these dependencies are updated. For example, suppose that you want to trigger an AJAX call whenever any observable value changes in an object. You may do something like:

Calling ko.toJS on the object serves two purposes. In this case, by both creating a clean object to send to the server with all observables unwrapped, as well as by creating a dependency on every observable in the structure. Each time that any of the observable data changes, this function will be triggered and any observables added to the structure will be included as dependencies.

Deferring the initial evaluation

By default, computeds are evaluated immediately upon creation. The initial value is cached and returned whenever the computed’s value is requested. If one of its dependencies changes, only then is the value recalculated and cached again. In cases where all of a computed’s dependencies are not yet defined at creation time, or there are performance implications to evaluating the computed immediately, postponing the evaluation may be beneficial. The deferEvaluation option will prevent the computed from being evaluated until something actually requests the value (programmatically or in a binding).

Making specific updates in a custom binding

When creating a custom binding, typically the update function is used to track any dependencies that should trigger the function to be called again. Usually this is to respond to view model changes and make corresponding updates to the user interface. Internally, Knockout actually uses a computed as the mechanism to track these dependencies. In some cases, you may need more control over what triggers an update and the exact code that is executed to respond to an update. Perhaps you have multiple observable options, and want to perform different updates to the bound element when either change. In this scenario, in the init function, you can create one or more computeds to handle changes specific to each option.

By using the disposeWhenNodeIsRemoved option, you can ensure that a computed is properly disposed. Whenever Knockout removes the element (most likely as part of using the template, foreach, with or if binding), the computed will have its dispose function called.

Avoiding dependencies

Observable’s and computed’s have a peek function that allow you to retrieve a value without creating a dependency. However, in a scenario where you are accessing multiple observables, or perhaps when executing a function where you cannot know what observables might be accessed, an immediately disposed computed can be a useful tool.

In this example, suppose that a function called someCallback is executed within a computed (maybe in the update function of a custom binding). To avoid taking any dependencies to the containing computed, the callback can be executed in its own computed and disposed of immediately.


Computed observables are a versatile tool in Knockout, and have a variety of options that modify their functionality. While computeds are commonly used to return calculated values, their dependency tracking mechanism can be quite useful to control when code is executed in relation to the changes happening to an application’s observable values.

Look below for some great JavaScript resources from Safari.

Not a subscriber? Sign up for a free trial.

Safari has the content you need

Learning JavaScript Programming Video teaches you the basics of programming with JavaScript, the worlds most used programming language. The tutorial is designed for the absolute beginner – no prior JavaScript programming experience is required in order to get the most out of this video training. You will start with learning what programming is, and specifically, what JavaScript is, how it it used, and its limitations. You will discover variables and data types, and how to take input and create output. Craig covers conditions, loops, arrays, sorting, functions, paramaters and debugging. You will even learn advanced concepts such as OOP, string manipulations, regular expressions and other programming patterns.
Expert JavaScript is your definitive guide to understanding how and why JavaScript behaves the way it does. Master the inner workings of JavaScript by learning in detail how modern applications are made. In covering lesser-understood aspects of this powerful language and truly understanding how it works, your JavaScript code and programming skills will improve.

Tags: computed observables, computeds, Dependencies, Knockout, Knockout.js, ko.toJS,

Comments are closed.