Search code examples
knockout.jsknockout-3.0

Custom binding won`t update when the parsed number equals the current


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

ie.

first input: 11.11 -> 11

second input: 11.20 -> 11.20

Binding:

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
                });
        }
    };

Viewmodel:

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)

    });
};

Html

//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>

Solution

  • 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
        }
    });