Knockout jS

PART 3 (BEGINNERS)Computed observables

Computed observables “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();    });}

Pure computed observables 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.

Pure computed observables 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();    });}

Writable computed bservables 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/

Computed Observable Reference 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.

Computed Observable Reference 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.

Using a computed observableA 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.

Thanks

If opportunity doesn't knock, build a door.- Milton Berle