2013-03-19 5 views
0

Попытка создать настраиваемую привязку, которая будет определять, когда значения изменяются в одном из двух полей ввода, когда они меняются, я хочу включить кнопку «Сохранить». Первоначально кнопка «Сохранить» отключена. Кажется, я не могу обнаружить это событие, я пытаюсь использовать флаг 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), 

..... };

// применять привязки

ko.applyBindings(my.vm); 

спасибо за любые предложения или помощь

+0

Вы можете поместить его в JSFiddle? – WolfgangCodes

ответ

0

Похоже, что обычай связывания может быть слишком много в этом случае. Я хотел бы использовать ko.computed на основе isDirty статуса каждого поля:

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/

+0

спасибо, Андрей, работает отлично. Хорошее предложение. – LRP

+0

@LRP: Без проблем! Рад помочь. –