KnockoutJS - force number for specific field using ko.mapping plugin

Question

When I use ko.mapping.toJSON it converts any changes I made into strings and they need to be numbers. I tried using the custom mapping like so:

    var mapping = {
   'y': {
        update: function(options) {
                return parseFloat(options.data);
        }
    }
}

... but this only keeps them as numbers inside the contect of the page. Since I am using this to update and external JSON that gets pulled in by HighCharts.js the numbers need to stay numbers even after the toJSON.

From an earlier answer here I was able to use:

//override toJSON to turn it back into a single val
    mappedData.prototype.toJSON = function() {
       return parseInt(ko.utils.unwrapObservable(this.val), 10);  //parseInt if you want or not 
    };

... which worked swimmingly. However this is just a single value type in the JSON so I am unclear on how I could use the same override for it. Do I need to create a whole new object to do this in this instance as well. Or is their something more concise?

Well. I just used the same functionality as in this post. http://stackoverflow.com/questions/7612046/template-for-a-single-dimension-array-with-knockout-js-and-ko-mapping Similar but I am still interested to know if this is the "best" way to go about this. — Joel Kelly, Sep 30 '11 at 22:48

score 6 · Accepted Answer · edited May 23 '17 at 11:56

Whenever you edit a value in an input, the value will end up being a string. Knockout reads the new value from the element and it is always a string.

If you want to keep it numeric, look at the answer on this question: Knockout.js: time input format and value restriction for a couple of ways to do it. If you use the custom binding (numericValue) in the answer, then you do not need to do anything else with the mapping options. If you use the numericObservable idea, then you would need to use the mapping options to ensure that it was creating these special observable rather than just a normal observable.

Otherwise, you can continue to use the toJSON override as well.

KnockoutJS - force number for specific field using ko.mapping plugin

1 Answers1