Format observable as a number with a specific precision

README.md

Creates an observable that is always parsed to a numeric value and rounded appropriately. Also provides a formatted value that is displayed with a fixed number of decimal places in the UI.

Uses the concepts from: http://knockoutjs.com/documentation/extenders.html http://freshbrewedcode.com/joshbush/2011/12/27/knockout-js-observable-extensions/

fiddle.html

<p>value: <strong data-bind="text: value"></strong></p>
<p>type: <strong data-bind="text: type"></strong></p>
<p>value: <input data-bind="value: value" /></p>

<p>formatted value: <strong data-bind="text: value.formatted"></strong></p>
<p>formatted type: <strong data-bind="text: formattedType"></strong></p>
<p>formatted value: <input data-bind="value: value.formatted" /></p>

fiddle.js

ko.subscribable.fn.numeric = function(precision) {
    var multiplier = Math.pow(10, precision);
    var base = this;
    
    var result = ko.computed({
        read: base,
        write: function(newValue) {
            var parsed = parseFloat(newValue);
            if (isNaN(parsed)) parsed = 0;
            var rounded = Math.round(parsed * multiplier) / multiplier;
            
            var current = base();
            if (rounded !== current) {
                base(rounded);
            } else {
                base.notifySubscribers(rounded);
            }
        }
    });
    
    result(this());
    
    result.formatted = ko.computed({
        write: result,
        read: function() {
            return base().toFixed(rounded);
        }
    });
    
    return result;
};

function AppViewModel() {
    this.value = ko.observable(15.2472).numeric(2);
    
    this.type = ko.computed(function() {
        return Object.prototype.toString.call(this.value());
    }, this);
    
    this.formattedType = ko.computed(function() {
        return Object.prototype.toString.call(this.value.formatted());
    }, this);
}

ko.applyBindings(new AppViewModel());