Question

所以我successfully been able to implement autocomplete将项目添加到列表中（fiddle）。

现在我需要使用jQuery UI自动完成来填充一些数据字段。仍然试图绕过Knockout，我不认为我已成功绑定自动完成。

我认为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

因此，基于原始问题（已删除），问题是当用户从address选择项目时，您希望绑定一组autocomplete属性。

GSerjo提到的同样问题也出现在那个小提琴中 - 没有使用ko.applyBindings。它只是注释掉了，所以修复了autocomplete显示。

下一个问题是价值没有出现在字段中。在自动填充的return false函数末尾添加select似乎可以解决该问题。 我不知道它具有什么重要性，我必须深入研究它。

除此之外，我清理了一些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);  
};

viewmodel：

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

自动完成装订：

<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

Answer 2

Knockout不会应用您的绑定，因为ko.applyBindings不存在。因此，只需在代码底部添加ko.applyBindings({});即可。

此处已更新version

注意：您可以使用F12和debugger;关键字调试代码。例如：

在debugger;函数

init

在您喜欢的浏览器中按F12，您会看到未调用绑定

为什么我的jQuery自动完成数据绑定使用Knockout JS？

2 个答案: