我有一个自动完成的值列表。此选择的选定值是一个 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);
}
});
JAVASCRIPT
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);
}
};