How to create a wrapper function for default knockout bindings

Viewed 401

I am displaying a huge tabular structure with knockout. The user has the option to remove rows by clicking a checkbox on the row:

data-bind="checked: row.removed"

The problem is that the table has to be re-rendered on click, which on slow computers/browsers takes up to one or two seconds - the checkbox changes its state after the table has been rendered so the UI feels unresponsive. I would like to create a wrapper function that does the same thing as the default checked-binding but additionally displays a loader symbol - then hides it again after the checked binding did its job. Something like:

ko.bindingHandlers.checkedWithLoader = {
    update: function(element, valueAccessor, allBindings) {
        loader.show();
        // call knockout's default checked binding here
        loader.hide();
    }
};

Is something like that possible? Is there a better alternative?

1 Answers
Related