unable to detect events in custom binding

Question

Trying to create a custom binding, which will detect when values change in one of two input boxes, when they change I want to enable the 'Save' button. Initially the 'Save' button is disabled. I can't seem to get it to detect the events, I'm trying to use an isDirty flag on both of the input boxes, so if either one detects a change, I display the 'Save' button. Is it better to use an event binding to detect when the user does a change? I thought a custom binding would be better. The isDirty flags are working for my error message display.

HTML:
<span>Global Percentage:</span> 
<input id="spaceGlobalPercentage" type="text" data-bind="value: globalPercent, valueUpdate: 'afterkeydown'" class="topInput" />

<span>Adjustment Factor:</span>
<input type="text" data-bind="value: adjustmentFactor, valueUpdate: 'afterkeydown'"class="topInput" />

<input type = "button" class="submitPercentCancelButton" id="submitPercentButton" value="Save" data-bind="click: save, enable: enableButton, buttonVisible: enableButton">

//custom binding

  ko.bindingHandlers.buttonVisible = {
    update: function (element, valueAccessor) {
        //var value = valueAccessor(valueAccessor());
        //var buttonUnwrapped = ko.utils.unwrapObservable(value);

        var value1Unwrapped = ko.utils.unwrapObservable(valueAccessor(my.vm.globalPercent.isDirty));
        var value2Unwrapped = ko.utils.unwrapObservable(valueAccessor(my.vm.adjustmentFactor.isDirty));

        if (value1Unwrapped || value2Unwrapped ) {               
            my.vm.enableButton(true);
        }
    }
};

// check if something changed

    ko.subscribable.fn.trackDirtyFlag = function() {
        var original = this();

        this.isDirty = ko.computed(function() {
            return this() !== original;
        }, this);

        return this;
    };

// view model

    my.vm = {
         globalPercent: ko.observable("").extend({ required: "Enter a Global Percent, between 1 and 100." }).trackDirtyFlag(),
        adjustmentFactor: ko.observable("").extend({ required: "Enter an Adjustment Factor, between 1 and 100." }).trackDirtyFlag(),
        enableButton: ko.observable(false),

..... };

// apply bindings

ko.applyBindings(my.vm);

thanks for any suggestions or assistance

Can you put it in a JSFiddle? – WolfgangCodes Mar 20 '13 at 01:22 — WolfgangCodes, Mar 20 '13 at 01:22

score 0 · Answer 1 · answered Mar 20 '13 at 02:05

Seems like a custom binding might be too much in this case. I'd use a ko.computed based on the isDirty status of each field:

var vm = {
    globalPercent: ko.observable("").extend({
        required: "Enter a Global Percent, between 1 and 100."
    }).trackDirtyFlag(),
    adjustmentFactor: ko.observable("").extend({
        required: "Enter an Adjustment Factor, between 1 and 100."
    }).trackDirtyFlag(),
    save: function () {
        alert('saved');
    }
};

vm.enableButton = ko.computed(function () {
    return this.globalPercent.isDirty() || this.adjustmentFactor.isDirty();
}, vm);

Example: http://jsfiddle.net/82wkk/

unable to detect events in custom binding

1 Answers1