Knockout computed vs custom binding calculation order

Question

I defined a custom binding that alters some way an observable's property, let's say customProperty. (for example):

ko.bindingHandlers.customBinding = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        //computes some value depending on observable value
        //...
        valueAccessor().customProperty = someValue;
    }
};

I also have a computed observable that triggers on my customBinded observable, in which I need the value of customProperty updated. It turns out logging inside custom binding and in computed code that computed is calculated before customBinding, so it reads old customProperty value.

Can I specify that binding has priority over computeds, or is there some workaround to achieve computed to "wait" for custom binding?

can you make the customProperty also an observable? My guess is that it should fire the computed observable again.. — gkb
Not so feasible to turn customProperty into an observable, but it could be an option — Nillus

Eric Bronnimann Eric Bronnimann · Accepted Answer · 2016-10-21T19:14:06

You can use the Rate-limiting observable notifications to delay the execution of the computed observable. e.g.

viewModel.computed = ko.computed(function() {
  var input = viewModel.input();
  return viewModel.input.customProperty + ' ' + input;
}).extend({rateLimit: 10 });

The slight delay will allow the binding to execute before the computed observable. See this JSFiddle example for a demonstration.

Knockout computed vs custom binding calculation order

1 Answers