jquery - 为什么我的 jQuery 自动完成数据绑定(bind)不使用 Knockout JS？

Question

所以我有successfully been able to implement autocomplete它将项目添加到列表( fiddle )。

现在我需要使用 jQuery UI 自动完成来填充一些数据字段。仍在尝试围绕 Knockout 进行思考，我认为我尚未成功绑定(bind)自动完成功能。

我以为 data-bind="autocompleteAddress: items 会触发我的 data-bind="autocompleteAddress，但没有发生任何事情 ( see me fiddle here )

我是否遗漏了一些明显的东西？

我的代码如下所示:

// HTML (the 'source:' is used for my ajax call. Not used in the fiddle)
    <input  
        type="text" 
        data-bind="autocompleteAddress: {source: '/address/autocompleteAddress'}" 
        name="Address[street1]" 
        value="Stovner Senter 3" 
        placeholder="Enter street name" 
        class="street1 form-control ui-autocomplete-input" 
        autocomplete="off" />


// JS    
var search_data = [
 {"id": "7186","street1": "Bose","street2": "","postal_code": "0521","city": "Oslo","country":"Norway"}, 
 {"id": "1069","street1": "BOSS Black","street2": "","postal_code": "0531","city": "Oslo","country":"Norway"}, 
 {"id": "1070","street1": "BOSS Green","street2": "","postal_code": "0522","city": "Oslo","country":"Norway"}
];

ko.bindingHandlers.autocompleteAddress = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {        
        var postUrl = site_url + allBindingsAccessor().source; //Not used here
        var self = viewModel;        

        $(element).autocomplete({
            minLength: 2,
            source: function (request, response) {
                response(search_data);
            },
            select: function (e, ui) {
                var item = ui.item;

            }
        }).data("uiAutocomplete")._renderItem = function (ul, item) {
            return jQuery("<li></li>")
                .data("ui-autocomplete", item)
                .append("<a>" + item.street1 + ' ' + item.city + "</a>")
                .appendTo(ul);
        }

    }
};

Answer 1

因此，根据原始问题(已删除)，问题是当用户从 autocomplete 中选择项目时，您希望绑定(bind)一组 address 属性。

该 fiddle 中也存在 GSerjo 提到的相同问题 - 没有使用 ko.applyBindings 。它只是被注释掉了，所以修复了自动完成的显示。

下一个问题是值没有显示在字段中。在自动完成的 select 函数末尾添加 return false 似乎可以解决该问题。 我不知道这有什么意义，我必须研究一下。

除此之外，我清理了一些 html 并提供了一个 Address 构造函数。

var Address = function (data) {
 this.address_id = ko.observable(data.id);
 this.street1 = ko.observable(data.street1);
 this.street2 = ko.observable(data.street2);  
 this.postal_code = ko.observable(data.postal_code);
 this.city = ko.observable(data.city);
 this.country = ko.observable(data.country);  
};

View 模型:

var vm = {
  items: ko.observableArray(search_data),
  address: ko.observable({})
}

自动完成绑定(bind):

<input type="text" class='street1 form-control' data-bind="autocompleteAddress: items, valueUpdate:'afterKeyDown', value: address().street1, attr:{placeholder: 'Enter street name'}"></input>

当用户做出选择时，

 select: function (e, ui) {
          viewModel.address(new Address(ui.item))
          return false;
         }

参见the updated fiddle