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

ko jquery autocomplete custom binding overrides previous binding

本文关键字:绑定 覆盖 自定义 ko-jquery      更新时间:2023-09-26

我为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);
        }
    });
}
};

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

例如,如果我的页面上有:

<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"answers"getUrl"值,但它们显示为不同的值。

如果能对我做错的地方有任何见解,我将不胜感激,谢谢。

不要使用thisinit函数不是构造函数。您可以将self作为对象文字,也可以仅将var用于回调。