A normal scenario with Knockout is that you want date and number observables to be formatted to the current culture of the client, this is easily implemented in a Knockout extender, something like.
ko.extenders.numeric = function(observable, options) {
var textValue = null;
return ko.computed({
write: function(value) {
textValue = value;
var parsed = Number.parseFloat(value);
if(!isNaN(parsed)) {
observable(parsed);
} else {
observable(null);
}
},
read: function() {
var value = observable();
if(value == null) {
return textValue;
}
return value.toLocaleString(); //This can be replaced with for example the Globalize plugin
}
});
};
Use it like
this.amount = ko.observable().extend({ numeric: true });
The problem with this approach is that the ViewModel will no longer work against numbers it will work against formatted strings, so this.amount() will return a string instead of a number. This is very bad practice in a View/ViewModel seperation stand point. (more…)