Question

Background: I’ve got a single-page knockout.js app using the mapping plugin. The data is updated via Websocket JSON from the server. I can see that the app is successfully receiving the data (printing data in console) and when there are object removals/additions, the ViewModel updates no problem.

Problem: When a property of an object is updated from the server, it does not change the ViewModel. Do I need to return the object property somehow with each update?

Here are the relevant snippets of code:

var userMapping = {
        "users": {
            key: function(data) { return ko.utils.unwrapObservable(data.id); },
            create: function(options) {
                // for sortable ui access
                return createUser(options.data);
            }
        }
    };
var jobMapping = {
        "jobs": {
            key: function(data) { return ko.utils.unwrapObservable(data.id); },
            create: function(options) {
                // for sortable ui access
                return createJob(options.data);
            },
            update: function(options) {
                return createJob(options.data);
            }
        }
    };
var createJob = function(job, user) {        
        // leaflet init
        createJobIcon(job);

        // general data mapping
        var result = ko.mapping.fromJS(job);
        return result;
    };
self.engineModel.update = function(data) {
       ko.mapping.fromJS(data, userMapping, self.engineModel);
    };

And in the ViewModel:

<li data-bind="visible: canceled()==false, attr: {class: 'job-li canceled-'+canceled()+' started-'+started()+' hold-'+hold() }">

Thanks for the insight!

Answer 1

I’ve been able to fix the behaviour but I remain skeptical about the long-term impact from the decision.

I removed this line:
key: function(data) { return ko.utils.unwrapObservable(data.id); },

Now everything updates as it should. If anyone has thoughts about further processing I’m all ears (for example, does this affect performance?)