Question

I’m using a combination of Knockout.js + the Knockout mapping plugin + jQuery in a rich web client that consumes JSON from a RESTful API.

I need some guidance on how to deal with null values in my view model. Here’s my scenario and the problem I’m running into:

Most of the data members returned by the REST API are nullable. To account for this, I’m passing to the mapping plugin a sample of JSON with null values:

um.jsonMaps.campaign = {
    "priority": null,
    "recipientListId": null,
    "autoPrepare": null,
    "timeToSend": null
}

I do the initial binding like this:

this.model = ko.mapping.fromJS(um.jsonMaps.campaign);

Here’s some data from an API call:

var data= {
    "priority": 95,
    "recipientListId": "a2aac72a-59f6-45da-a636-a48cc2b20137",
    "autoPrepare": false,
    "timeToSend": null
}

…which is bound like this:

ko.mapping.fromJS(data, this.viewModel.model);

The problem is that if users modify or touch any of the UI elements bound to this data, they implicitly turn the data member in the model into a quoted string literal. So, the integer 95 becomes “95” if the user adds some text and deletes it. And if a value that was null from the API is touched in the UI, it becomes “” (e.g. the empty string).

I need ints and nulls to remain as ints and nulls after editing.

Answer 1

In my project I ended up with creating view model over data from the server. I added new property with getter and setter so that it writes numeric value when required:

function DataViewModel(dataModel) {
    var self = this;
    self.priority = ko.observable(dataModel.priority);
    self.recipientListId = ko.observable(dataModel.recipientListId);
    self.autoPrepare = ko.observable(dataModel.autoPrepare);
    self.timeToSend = ko.observable(dataModel.timeToSend);



    self.priorityKo = ko.computed({
        read: function () {
            return self.priority().toFixed(2);
        },
        write: function (value) {
            value = parseFloat(value.replace(/[^\.\d]/g, ""));
            if (isNaN(value)) {
                self.priority(-1); // to fire 'changed' event
                self.priority(0); // final value in case of incorrect user input
            } else {
                self.priority(value); // real numeric value
            }
        },
        owner: this
    });

your mapping will look like:

this.model = ko.mapping.fromJS(new DataViewModel(um.jsonMaps.campaign));