Question

我为jquery自动完成编写了一个简单的自定义绑定，如下所示：

ko.bindingHandlers.autoComplete = {
init: function (element, valueAccessor, allBindingsAccessor) {
    var self = this;
    self.getUrl= ko.unwrap(valueAccessor());
    self.successCallBack = allBindingsAccessor().successCallBack;
    self.selectCallBack = allBindingsAccessor().selectCallBack;

    $(element).autocomplete({
        minLength: 3,
        source: function (request, response) {
            $.ajax({
                url: self.getUrl + request.term,
                type: 'GET',
                cache: false,
                dataType: 'json',
                success: function (data) {
                    response(self.successCallBack(data));
                },
            });
        },
        error: function(xmlHttpRequest, textStatus, errorThrown) {
            alert('some error occured', textStatus, errorThrown);
        },
        open: function () {
            $(element).data("uiAutocomplete").menu.element.addClass("dropdown-menu-xs");
        },
        select: function (event, ui) {
            self.selectCallBack(event, ui);
        }
    });
}
};

当我的页面中只有一个元素具有此绑定时，它工作正常，但当我有2个或更多元素时，最新自动完成字段的url将应用于具有autoComplete绑定的所有元素

例如，如果我在我的页面上：

<input id="first" type="text" class="form-control input-xs" data-bind="autoComplete: firstURL" />

<input id="second" type="text" class="form-control input-xs" data-bind="autoComplete: secondURL" />

两个输入元素在各自的ajax调用中都会以'secondURL'结尾。

我已经尝试在控制台中记录'element'和'getUrl'值，它们显示为不同。

非常感谢我对自己做错的任何见解，谢谢。

Answer 1

不要使用this。 init函数不是构造函数。您可以创建一个对象文字的self，或者只使用var作为回调。

ko jquery自动完成自定义绑定覆盖以前的绑定

1 个答案: