验证ko可观察值的自动完成选择

时间:2013-05-19 00:36:09

标签: jquery ajax knockout.js

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

0 个答案:

没有答案