Knockout deferUpdates conflict with 'if' binding

Question

I very often use the if binding in knockout to hide something, with the added bonus that I don't need to worry about null reference errors inside the if. In this example if address() is null then the whole block is removed so you avoid having to deal with null checking for every property. This would not be the case had I used the visible binding.

<div data-bind="if: address()">
    You live at:
    <p data-bind="text: address().street.toUpperCase()"></p>            
</div>

This is the simplest case above - and yes I would generally use this pattern with the <!-- ko --> comment syntax.

What is actually causing me problems is when I use a more complex computed value and enable the ko.options.deferUpdates option :

<div data-bind="if: hasAddress()">
    You live at:
    <p data-bind="text: address().street.toUpperCase()"></p>            
</div>

The simplest implementation of this computed observable might be something like this :

this.hasAddress = ko.computed(function () { return _this.address() != null; }); 

This all works great until I do the following:

1) set ko.options.deferUpdates = true before creating the observables.

2) address() will start off as null and everything is fine

3) set address() to { street: '123 My Street' }. Again everything works fine.

4) reset address() to null. I get a null error because address().street is null :-(

Here is a fiddle to illustrate the problem : https://jsfiddle.net/g5gvfb7x/2/

It seems that unfortunately due to the order in which the micro-tasks runs it tries to recalculate the text binding before the if binding and so you still get a null error that normally wouldn't occur.

---

I'm a little scared about this since I use this pattern a lot :-(

Answer 1

When using deferUpdates, Knockout internally uses a dirty event to notify all computed observables of a change in their dependencies and to schedule updates, which happens in depth-first order. The problem here occurs because bindings ignore the dirty event and wait for a change event, which will happen in a breadth-first order.

The fix has to happen in Knockout to make bindings respond to the dirty events. This has already been checked in for the upcoming version (3.5.0): https://github.com/knockout/knockout/issues/2226