Computed Observables Overview

What if you have an observable for firstName, and another for lastName, and you want to display the full name? That's where computed observables come in - these are functions that are dependent on one or more other observables, and will automatically update whenever any of these dependencies change.

For example, given the following view model class,

function AppViewModel() {
  this.firstName = fw.observable('Bob');
  this.lastName = fw.observable('Smith');
}

... you could add a computed observable to return the full name:

function AppViewModel() {
  // create reference so we can more easily access this view model
  var self = this;

  // ...

  self.fullName = fw.computed(function() {
    return self.firstName() + " " + self.lastName();
  });
}

Now you could bind UI elements to it, e.g.:

The name is <span data-bind="text: fullName"></span>

... and they will be updated whenever firstName or lastName changes (your evaluator function will be called once each time any of its dependencies change, and whatever value you return will be passed on to the observers such as UI elements or other computed observables).

Dependency Chains

Of course, you can create whole chains of computed observables if you wish. For example, you might have:

• an observable called items representing a set of items
• another observable called selectedIndexes storing which item indexes have been 'selected' by the user
• a computed observable called selectedItems that returns an array of item objects corresponding to the selected indexes
• another computed observable that returns true or false depending on whether any of selectedItems has some property (like being new or being unsaved). Some UI element, like a button, might be enabled or disabled based on this value.

Changes to items or selectedIndexes will ripple through the chain of computed observables, which in turn will update any UI elements bound to them.

UI-Only Computed Observables

If you only need to use the compound full name in the UI you could declare it as:

function AppViewModel () {
  // ...

  this.fullName = function () {
    return this.firstName() + " " + this.lastName();
  };
}

Now your binding in UI elements becomes a method call, e.g.:

The name is <span data-bind="text: fullName()"></span>

Footwork will create a computed observable internally in order to detect what observables the expression depends on, and will automatically dispose it when the associated element is later removed.