Computed observables are read-only properties calculated from other observables. Pure computed observables provide performance benefits by not maintaining subscriptions when unobserved. To declare a computed, use ko.computed or ko.pureComputed, passing a function returning the value. Computed observables can be made writable by supplying a write callback. They are constructed by passing an evaluator function, target object, and options to ko.computed.
2. “Computed observables, in their most
common incarnation, are read-only
calculated properties.”
How to declare computed observable?
function AppViewModel() {
this.firstName = ko.observable('Bob');
this.lastName = ko.observable('Smith');
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
});
}
3. Pure computed observables, provide performance
and memory benefits over regular computed
observables for most applications. This is because
a pure computed observable doesn’t maintain
subscriptions to its dependencies when it has no
subscribers itself. This feature:
• Prevents memory leaks from computed observables that
are no longer referenced in an application but whose
dependencies still exist.
• Reduces computation overhead by not re-calculating
computed observables whose value isn’t being observed.
4. If your computed observable simply calculates and
returns a value based on some observable
dependencies, then it’s better to declare it as
a ko.pureComputed instead of a ko.computed. For
example:
How to declare pure computed observable?
function AppViewModel() {
this.firstName = ko.observable('Bob');
this.lastName = ko.observable('Smith');
this.fullName = ko.pureComputed(function() {
return this.firstName() + " " + this.lastName();
});
}
5. Normally, computed observables have a value that is
computed from other observables and are
therefore read-only. What may seem surprising, then,
is that it is possible to make computed
observables writable. You just need to supply your own
callback function that does something sensible with
written values.
For example: http://jsfiddle.net/gx5856qy/
6. A computed observable can be constructed using one of the
following forms:
ko.computed( evaluator [, targetObject, options] ) — This form
supports the most common case of creating a computed observable.
• evaluator — A function that is used to evaluate the computed observable’s current
value.
• targetObject — If given, defines the value of this whenever KO invokes your
callback functions.
• options — An object with further properties for the computed observable. See the
full list below.
ko.pureComputed( evaluator [, targetObject] ) — Constructs
a pure computed observable using the given evaluator function and
optional object to use for this. Unlike ko.computed, this method
doesn’t accept an options parameter.
ko.pureComputed( options ) — Constructs a pure computed
observable using an optionsobject. This accepts the read, write,
and owner options described above.
7. ko.computed( options ) — This single parameter form for creating a
computed observable accepts a JavaScript object with any of the following
properties.
• read — Required. A function that is used to evaluate the computed observable’s current value.
• write — Optional. If given, makes the computed observable writable. This is a function that
receives values that other code is trying to write to your computed observable. It’s up to you to
supply custom logic to handle the incoming values, typically by writing the values to some
underlying observable(s).
• owner — Optional. If given, defines the value of this whenever KO invokes your read or
write callbacks.
• pure — Optional. If this option is true, the computed observable will be set up as
a purecomputed observable. This option is an alternative to the ko.pureComputed constructor.
• deferEvaluation — Optional. If this option is true, then the value of the computed observable
will not be evaluated until something actually attempts to access its value or manually
subscribes to it. By default, a computed observable has its value determined immediately
during creation.
• disposeWhen — Optional. If given, this function is executed before each re-evaluation to
determine if the computed observable should be disposed. A true –is result will trigger disposal
of the computed observable.
• disposeWhenNodeIsRemoved — Optional. If given, disposal of the computed observable will
be triggered when the specified DOM node is removed by KO. This feature is used to dispose
computed observables used in bindings when nodes are removed by the template and
control-flow bindings.
8. A computed observable provides the following functions:
• dispose() — Manually disposes the computed observable, clearing all
subscriptions to dependencies. This function is useful if you want to stop a
computed observable from being updated or want to clean up memory for a
computed observable that has dependencies on observables that won’t be
cleaned.
• extend(extenders) — Applies the given extenders to the computed observable.
• getDependenciesCount() — Returns the current number of dependencies of the
computed observable.
• getSubscriptionsCount( [event] ) — Returns the current number of subscriptions
(either from other computed observables or manual subscriptions) of the
computed observable. Optionally, pass an event name (like "change") to return
just the count of subscriptions for that event.
• isActive() — Returns whether the computed observable may be updated in the
future. A computed observable is inactive if it has no dependencies.
• peek() — Returns the current value of the computed observable without creating a
dependency (see the section on peek).
• subscribe( callback [,callbackTarget, event] ) — Registers a manual
subscription to be notified of changes to the computed observable.