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

【问题标题】：ko jquery autocomplete custom binding overrides previous bindingko jquery 自动完成自定义绑定覆盖以前的绑定
【发布时间】：2015-12-11 08:20:20
【问题描述】：

我已经为 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 将应用于所有具有自动完成绑定的元素

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

<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' 值，但它们显示不同。

非常感谢任何关于我做错了什么的见解，谢谢。

【问题讨论】：

标签： javascript jquery ajax knockout.js autocomplete

【解决方案1】：

不要使用this。 init 函数不是构造函数。您可以创建一个 self ，它是一个对象字面量，或者只使用 vars 进行回调。

【讨论】：