KnockoutJS - How do computed observables with conditional statements work

Question

KnockoutJS has the concept of computed observables, which are functions that depend on one or more observables. Knockout is able to determine the dependencies of a computed observable as described in the docs:

Whenever you declare a computed observable, KO immediately invokes its evaluator function to get its initial value. While your evaluator function is running, KO keeps a log of any observables (or computed observables) that your evaluator reads the value of.

Now, what I don't understand is, how this works if your computed observable contains conditional logic. If Knockout invokes the evaluator function, surely conditional logic might result in observables which the function depends on not being invoked?

I created this fiddle to test:

http://jsfiddle.net/bJK98/

var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
    this.condition = ko.observable(false);

    // at the point of evaluation of this computed observabled, 'condition'
    // will be false, yet the dependecy to both firstName and lastName is
    // identified
    this.fullName = ko.computed(function() {
        return this.condition() ? this.firstName() : this.lastName();
    }, this);
};

However, somehow Knockout correctly identified the dependency to both firstName and lastName.

Can anyone explain how?

Can't get the question, I believe computed observables determines own state in run time by evaluating all dependencies, so all looks clear and straightforward, sorry but can't get a main point of your question — sll
Good question. I always thought the approach they describe in the manual as you've quoted was pretty smart, but now that you point out this, I wonder if it's very smart and not just pretty smart... :D — Jani Hartikainen

RP Niemeyer RP Niemeyer · Accepted Answer · 2012-04-13T19:56:12

dependencies are tracked again each time that a dependentObservable is re-evaluated. So, if you have conditional logic, then the branch that is not hit will not contribute to the dependencies.

In your fiddle, if you edit the firstName, then the value is not updated until you toggle condition. At that point, lastName is no longer a dependency, so changes to it do not trigger the dependentObservable.

It is not really more complex than the original description. The basic thing to remember is that dependencies are recorded each time that it is re-evaluated.

KnockoutJS - How do computed observables with conditional statements work

2 Answers