我有一个自动完成的值列表。该选择的所选值是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>
MODEL
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);
}
});
JAVASCRIPT
function IsUserValid(userName, successFunc, failureFunc) {
var url = '/Controller/Method';
var data = [{ name: 'userName', value: userName}];
PostJson(url, data, successFunc, failureFunc);
}
KO Binding Handler
ko.bindingHandlers.ko_autocomplete = {
init: function (element, params) {
$(element).autocomplete(params());
},
update: function (element, params) {
$(element).autocomplete("option", "source", params().source);
}
};