Question

I’m trying to make a crossFadeVisible bindingHandler. The main idea is that when we set a value, I’d like it to fade in. If we clear the value (ie. set to null), I’d like to have it fade out, and if we change the value, I’d like to have it fade out on the old value, and fade in on the new value.

I’ve been fighting the better part of the afternoon on this, so I’m not entirely sure it’s possible.

I decided I’d follow what I saw others doing, and create a jsfiddle for this (http://jsfiddle.net/jrstarke/4DTFq/20/).

Initially the value is undefined, but if you hit Set, we set the value to 1, and add some new buttons. If you now clear the value, it goes away as expected, and setting it again works fine. If you hit increment, everything works as expected.

And now the part I can’t explain. If with ‘2’ showing, you hit increment, nothing happens. Clear, the buttons go away (since we’ve now cleared the original value). But the display value stays the same.

What seems to have happened, that I can’t explain, is when we call the value.displayed(value()) to set the new display value to the current value, it causes the update method to be called again immediately (?) at which point we run through the method completely, and it updates as expected, but it appears we have unbound the value from changes, as this update method never gets called again.

Anyone know how to fix this, or if what I’m trying to do is possible?

Answer 1

The problem is that the update code for your handler is never called after the first fadeOut. The reason is that the dependency tracking code doesn’t detect that your binding depends on value because it is never actually read. So when the value actually does get updated, the binding is never retriggered.

Why that happens is because the postFade code doesn’t get called as the binding is being updated. It actually gets called afterwards when the fadeOut completes. It updates when it is initially updated because the postFade function was called when value.displayed was falsy.

A simple way to fix this would be to read value somewhere when the update code is called. You don’t necessarily have to do anything with the value, just that you attempt to read it.

update: function(element, valueAccessor) {
    var value = valueAccessor();

    var postFade = function() {
        // postFade depends on `value`
        value.displayed(value());
        if (value.displayed()) $(element).fadeIn('fast');
    }

    if (value.displayed()) {
        // postFade is invoked later after the fade out
        $(element).fadeOut('fast', postFade);
        // dependent on `value.displayed`

        // get the value so the dependency tracking code
        // detects that the binding depends on it
        value();
    }
    else {
        // postFade is invoked immediately
        postFade();
        // dependent on `value.displayed` and `value`
    }
}