How to trigger several changes as "unit" with knockout.js

Question

I have a small app filtering a list of items by providing several choices for different attributes in combobox (select) elements. Everything works fine selecting and deselecting single combobox elements, but since I introduced a required button to "Reset Filter settings" which resets all combobox elements to null I get poor performance. It seems that each single statement modifying a comboxbox is triggering a refresh of the complete list.

How can I tell knockout to STOP updating the observables, have all combobox elements reset to null and then tell knockout to RESUME updating or initially TRIGGER the update myself.

Any ideas?

Thanks Andreas

Answer 1

You could pause the computed property(or properties) managing the list while you reset all your combos.

See http://www.knockmeout.net/2011/04/pausing-notifications-in-knockoutjs.html

Answer 2

Shamelessly expanding on Niko's comment, you should use the throttle extender.

Adding .extend({ throttle: 10 }) to my computed declaration fixed this problem for me:

// get only selected markets
self.SelectedMarkets = ko.computed(function() {
    return ko.utils.arrayFilter(self.Markets(), function(market) {
        return market.IsSelected() == 1; });
}).extend({ throttle: 10 });