値のオートコンプリート リストがあります。この選択の選択された値は、ko 観測変数です。リストから値を選択しなかった場合に備えて、リストから選択した値または入力した値を検証する必要があります。
文字を入力してからリストから値を選択すると、入力した文字に対して検証呼び出しが実行され、選択した値に対して同時に呼び出されるようです。
この競合状態が発生しない場合に、ユーザーが選択または入力した値を検証する良い方法はありますか?
ここにいくつかのコードがあります:
HTML
<div>
<label for="AssignedTo">Assigned To: </label>
<input id="AssignedTo" placeholder="Assigned To" data-bind="ko_autocomplete:{source: $parent.users(), select: addAssignedTo}, value: AssignedTo"/>
<span class="error" data-bind="text: AssignedToInvalid"></span>
</div>
モデル
self.AssignedToInvalid= ko.observable();
self.AssignedTo= ko.observable();
self.addAssignedTo= function (event, ui) {
if (!isNullOrEmpty(self.AssignedTo())) {
IsUserValid(ui.item.label, self.AssignedToValidated, self.AssignedToNotValid);
}
};
self.AssignedToValidated= function (user) {
self.AssignedTo(user);
};
self.AssignedToNotValid= function (error) {
self.AssignedToInvalid("Invalid user");
};
self.AssignedTo.subscribe(function() {
if (!isNullOrEmpty(self.AssignedTo)) {
IsUserValid(self.AssignedTo(), self.AssignedToValidated, self.AssignedToNotValid);
}
});
ジャバスクリプト
function IsUserValid(userName, successFunc, failureFunc) {
var url = '/Controller/Method';
var data = [{ name: 'userName', value: userName}];
PostJson(url, data, successFunc, failureFunc);
}
KOバインディングハンドラ
ko.bindingHandlers.ko_autocomplete = {
init: function (element, params) {
$(element).autocomplete(params());
},
update: function (element, params) {
$(element).autocomplete("option", "source", params().source);
}
};