2013-03-19 43 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 2013-03-20 01:22:33

回答

0

似乎是一个自定义的结合可能是在这种情况下太多。我会使用基于每个字段的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/

+0

谢谢安德鲁,作品完美。好建议。 – LRP 2013-03-20 17:15:20

+0

@LRP:没问题!乐意效劳。 – 2013-03-20 17:35:56

相关问题