JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<input data-bind="formatMoney: testVal">
CSS
input {
padding: 8px;
font-size: 14px;
}
JavaScript
ko.bindingHandlers.formatMoney = {
init: function(element, valueAccessor) {
var value = valueAccessor();
var interceptor = ko.computed({
read: function() {
return numeral(ko.unwrap(value)).format('0,0.00');
},
write: function(newValue) {
if($.trim(newValue) == '')
value("0");
else
value(numeral().unformat(newValue));
value.valueHasMutated();
}
}).extend({ notify: 'always' });
if(element.tagName.toLowerCase() == 'input' )
ko.applyBindingsToNode(element, {
value: interceptor
});
else
ko.applyBindingsToNode(element, {
text: interceptor
});
}
}
function viewModel () {
testVal = ko.observable(123456789);
}
ko.applyBindings(new viewModel());