JSFiddle - React, Tailwind, and code Playground

by jgoemat

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<input type="text" data-bind="value: number"></input>
<br/>
<input type="text" data-bind="value: money"></input>
<br/>
typeOf(value): <span data-bind="text: typeOf(number())"></span>

JavaScript

function formatMoney(value) {
    return '$' + value.toFixed(2);
};

function unformatMoney(value) {
    return parseFloat(value.replace('$', '').replace(',', ''));
};

ko.observable.fn.formatAsMoney = function() {
    var base = this;
    var computed = ko.computed({
        read: function() {
            var value = parseFloat(base());
            return formatMoney(value);
        },
        write: function(newValue) {
            base(unformatMoney(newValue));
        }
    });
    return computed;
};

function ViewModel() {
    var self = this;
    self.number = ko.observable(10.5);
    self.money = self.number.formatAsMoney();
};

var my = { vm : new ViewModel() };

ko.applyBindings(my.vm);