사용자 지정 바인딩에서 이벤트를 검색 할 수 없습니다.

Question

두 개의 입력 상자 중 하나에서 값이 변경 될 때이를 감지하고 '저장'단추를 활성화하려는 사용자 지정 바인딩을 만들려고합니다. 초기에는 '저장'버튼이 비활성화되어 있습니다. 이벤트를 감지 할 수없는 것처럼 보입니다. 두 입력 상자에서 isDirty 플래그를 사용하려고 했으므로 둘 중 하나가 변경을 감지하면 '저장'단추가 표시됩니다. 이벤트 바인딩을 사용하여 사용자가 변경을 감지하는 것이 더 나은가? 나는 커스텀 바인딩이 더 좋을 것이라고 생각했다. 내 오류 메시지 표시를 위해 isDirty 플래그가 작동합니다. 뭔가 변경 한 경우

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

// 사용자 확인 //

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

바인딩

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

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

     return this; 
    }; 

// 뷰 모델

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), 

..... };

는 //은

Answer 1

이 경우 너무 많은 수 있습니다 사용자 지정 바인딩처럼 보인다 제안이나 도움 바인딩

ko.applyBindings(my.vm); 

감사를 적용합니다. 나는 각 필드의 isDirty 상태에 따라 ko.computed을 사용하십시오 :

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

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