formatting rules for numbers in knockoutjs

http://stackoverflow.com/questions/7704268/formatting-rules-for-numbers-in-knockoutjs

by housecor

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<div data-bind="numericText: myValue"></div>
<div data-bind="numericText: myValue, precision: 3"></div>
<div data-bind="numericText: myValue, precision: myPrecision"></div>
<div data-bind="numericText: val2"></div>
Precision: <input data-bind="value: myPrecision" /><br/>
Value: <input data-bind="value: val2" />

JavaScript

ko.bindingHandlers.numericText = {
    update: function(element, valueAccessor, allBindingsAccessor) {
       var value = ko.utils.unwrapObservable(valueAccessor()),
           precision = ko.utils.unwrapObservable(allBindingsAccessor().precision) || ko.bindingHandlers.numericText.defaultPrecision,
           formattedValue = parseInt(value).toFixed(precision);
        
        ko.bindingHandlers.text.update(element, function() { return '$' + formattedValue; });
    },
    defaultPrecision: 2  
};

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

var viewModel = {
    myValue: ko.observable(123.55454),
    myPrecision: ko.observable(4),
    val2: ko.observable(1)
};

ko.applyBindings(viewModel);