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?