Question

I have a page using KnockoutJS, with a somewhat large count of observables (about 35 are relevant here, some 60 total). I use the KO mapping plugin, but I don’t know if that has anything to do with my problem.

Most (not all) of the observables are bound to input fields.

The user can save the current set of inputs to a named set, or reload from a previously saved set. There is UI that indicates whether the current set of inputs came from a saved set, or are edited (unsaved) inputs.

In order to update the “save/load inputs” UI when any of the inputs are edited (I don’t care which one), I subscribe to all the relevant ‘input’ observables.

Here’s my bizarre problem: when the count of subscribed observables is about 25 or higher, I get a spurious call to my callback function from deep inside the ko.applyBindings(...) call.

• When it happens, there is only one spurious callback
• The input that gets reported is typically the last one I subscribed to.
• If I remove enough subscriptions so that I subscribe to about 25 or less, the spurious callback disappears.
• If I pass that limit and I keep adding subscriptions, the call reappears for different fields as I keep adding to the list.
• If I subscribe to all the inputs, then the callback claims to be a callback for __ko_mapping__ which is absurd.

I have to assume that either I’m not binding to the subscription correctly, or that there is some bug within KO or the KO mapping plugin that causes the list of subscriptions to get messed up. I haven’t been able to track the problem so far.

The subscription code looks roughly like this:

// markSavedInputsDirty(name) defined elsewhere
function registerCallbacks() {
    var data = viewModel.inputs;
    var member;
    for(member in data) {
        if (data.hasOwnProperty(member) && ko.isObservable(data[member])) {
            if(member /* ... not certain observables which I need to ignore */ ) {
                data[member].subscribe(function() {return markSavedInputsDirty(member)}, data[member]);
            }
        }
    }
}

(Note: the code above tracks which member is being called, but only as a debugging aid. When we saw the problem crop up originally, the code used to just use the same callback function (no currying) for all the observables)

Has anybody seen anything like this before?

Answer 1

RESOLUTION:

The closure on the subscribe(...) call was messed up, as @MichaelBest indicated in the comments. I though it would contain the value of member at the point of invocation, but it contains member itself (the object, the same for all calls). What I was seeing was the final value of member from the loop, and that was leading me astray. I should not have been doing this at midnight.

Here’s a correct implementation of that line:

data[member].subscribe(markSavedInputsDirty.bind(data[member], member));

Once I had the right diagnostics, everything became clear: the spurious call comes from a value binding on a <select> element in the page. Knockout internally needs to make sure that the selected <option>‘s value is exactly the same as the viewModel‘s value (see ensureDropdownSelectionIsConsistentWithModelValue(...) in the source for Knockout).

In my case, the observable value had 3 (number), while the selected <option> — naturally — had “3” (string). Therefore, Knockout set the viewModel to the option’s value, and that triggered the notification.

So, the original subscriptions (before my broken attempt at currying) were correct and the notification was legitimate. I just need to swap things around so my monitoring code doesn’t have any effect until after the binding.