JSFiddle - React, Tailwind, and code Playground
by RobertSudwarts
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="http://rawgit.com/BobKnothe/autoNumeric/master/autoNumeric.js"></script>
<input type="text" data-bind="autoNumeric:$data.Amount, settings:{mDec:1,aSep: ''} " />
<input type="text" data-bind="autoNumeric:$data.OnloadAmount, settings:{mDec:1,aSep: ''} " />
JavaScript
var vm = function(){
this.Amount=ko.observable("");
this.OnloadAmount=ko.observable(143); //onLoad Test
ko.bindingHandlers.autoNumeric = {
init: function (el, valueAccessor, bindingsAccessor, viewModel) {
var $el = $(el),
bindings = bindingsAccessor(),
settings = bindings.settings,
value = valueAccessor();
$el.autoNumeric(settings);
$el.autoNumeric('set', parseFloat(ko.utils.unwrapObservable(value()), 10));
$el.change(function () {
value(parseFloat($el.autoNumeric('get'), 10));
});
},
update: function (el, valueAccessor, bindingsAccessor, viewModel) {
var $el = $(el),
newValue = ko.utils.unwrapObservable(valueAccessor()),
elementValue = $el.autoNumeric('get'),
valueHasChanged = (newValue != elementValue);
if ((newValue === 0) && (elementValue !== 0) && (elementValue !== "0")) {
valueHasChanged = true;
}
if (valueHasChanged) {
$el.autoNumeric('set', newValue);
}
}
};
}
ko.applyBindings(new vm());