2 つの入力ボックスのいずれかで値が変更されたときにそれを検出するカスタム バインドを作成しようとしています。変更時に [保存] ボタンを有効にしたいと考えています。最初は「保存」ボタンは無効になっています。イベントを検出できないようです。両方の入力ボックスで 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);
提案や支援に感謝します