Suspend bindings in knockout.js 1.2.1

Question

Is there any option to suspend and resume bindings in knockout?

Version : knockout.js 1.2.1

Our need for suspending bindings stems from the following. During some operations we have to load a lot of data from the server, eg multiple selects have their entire data changed, there are tables whose rows are dynamically added etc.

Now in this current scenario, the form is fully bound with the view model. When we clear the combos and add each item, the view gets refreshed hence there is significant delay. If I had the means to suspend binding, I could suspend, then load all data into the viewmodel and then resume binding again.

Answer 1

I don't think there is a way to suspend binding in knockout.js. Without seeing the code it's hard to say, but the slowness is probably caused by the fact that you refresh you observableArrays by clearing them and adding new items one by one. Instead you can refresh the entire array at once:

...
self.manyItems = ko.observableArray();
...
function refreshItems(newItems){
    self.manyItems(newItems);
}

Answer 2

Suspending and resuming is possible: take a look at this demo put together by Ryan Niemeyer. Refer to this entry on his blog for more background information.

Answer 3

If you really need to pause subscriptions still, I found a way to pause them in computed observables with a pauseableComputed (idea taken from this site). I modified it a bit to add the pauseableComputed the ability to have read and write functions.

viewModel.myComputedObservable = ko.pauseableComputed(function() {
    return myResult;
}, viewModel);

For pausing, you call myComputedObservable.pause();, make all your modifications and then call myComputedObservable.resume(); for those modifications to trigger the subscriptions in the computed observable.

   //wrapper for a computed observable that can pause its subscriptions
        ko.pauseableComputed = function (evaluatorFunction, evaluatorFunctionTarget) {
            var _cachedValue = "";
            var _isPaused = ko.observable(false);

            //the computed observable that we will return
            var result;
            if (evaluatorFunction.read) {
                result = ko.computed({
                    read: function() {
                        if (!_isPaused()) {
                            //call the actual function that was passed in
                            return evaluatorFunction.read.call(evaluatorFunctionTarget);
                        }
                        return _cachedValue;
                    },
                    write: function(value) {
                        if (!_isPaused()) {
                            //call the actual function that was passed in
                            return evaluatorFunction.write.call(evaluatorFunctionTarget, value);
                        }
                        return _cachedValue;
                    }
                }, evaluatorFunctionTarget);
            } else {
                result = ko.computed(function() {
                    if (!_isPaused()) {
                        //call the actual function that was passed in
                        return evaluatorFunction.call(evaluatorFunctionTarget);
                    }
                    return _cachedValue;
                }, evaluatorFunctionTarget);
            }