Reputation: 823
The knockout binding won`t update the input when the entering a floatnumber that is parsed to a integer that is already entered/parsed.
Changing the input to another number or clearing the input works. But I need it to work for all number.
All help is much appreciated
I have tried also tried
.extend({notify: 'always'})
with no luck
first input: 11.11 -> 11
second input: 11.20 -> 11.20
ko.bindingHandlers.integer = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var maxInt = 2147483647;
var bindings = allBindingsAccessor();
var valueUpdate = bindings.valueUpdate;
var defaultValue = null;
var observable;
var accessor = (bindings == undefined ? valueAccessor() : bindings.integer);
if (typeof (accessor) != "function" && typeof (accessor) != "number") {
observable = accessor.value;
defaultValue = accessor.default;
maxInt = accessor.maxValue != null ? accessor.maxValue : maxInt;
} else {
observable = accessor;
}
var interceptor = ko.computed({
read: function () {
var value = ko.isObservable(observable) ? observable() : observable;
if (value === null || value === undefined) return defaultValue;
return BindingHelpers.formatWithThousandSeparators(value);
},
write: function (newValue) {
newValue = newValue.replace(/\s/g, '');
var v = BindingHelpers.reverseFormat(newValue, defaultValue);
v = (v*1).toFixed(0);
if (v > maxInt)
v = maxInt;
observable(v);
}
});
if (element.tagName === 'INPUT')
ko.applyBindingsToNode(element, {
value: interceptor,
valueUpdate: valueUpdate
});
else
ko.applyBindingsToNode(element, {
text: interceptor
});
}
};
self.addEnergy= function () {
self.energy.push({
Source: ko.observable(""),
Target: ko.observable(""),
Effect: ko.observable(0)
.extend({ max: { params: 1500, message: '' } })
.extend({ min: { params: 1, message: ''} }),
Id: ko.observable(""),
Enabled: ko.observable(true)
});
};
//Code emited
<td class="text-center has-feedback" data-bind="css: {'has-error': !Effect.isValid()}">
<input type="text" class="edit form-control text-right" data-bind="integer: Effect, visible: Enabled" />
<label class="read" data-bind="integer: Effect, visible: !Enabled()"></label>
</td>
Upvotes: 2
Views: 40
Reputation: 4304
Try adding interceptor.notifySubscribers();
to the end of your write function.
var interceptor = ko.computed({
read: function () {
var value = ko.isObservable(observable) ? observable() : observable;
if (value === null || value === undefined) return defaultValue;
return BindingHelpers.formatWithThousandSeparators(value);
},
write: function (newValue) {
newValue = newValue.replace(/\s/g, '');
var v = BindingHelpers.reverseFormat(newValue, defaultValue);
v = (v*1).toFixed(0);
if (v > maxInt)
v = maxInt;
observable(v);
interceptor.notifySubscribers(); //<-- notifies the UI to update even if the value hasn't changed
}
});
Upvotes: 1