为什么我的jQuery不能使用敲除JS自动完成数据绑定？

因此，我已经找到了将项目添加到列表中的方法

现在我需要使用jQueryUIAutoComplete来填充一些数据字段。我仍然在努力让自己的脑袋绕过淘汰赛，我认为我没有成功地绑定自动完成

我以为data bind=autocompletedaddress:items会触发我的data bind=autocompletedaddress，但什么都没有发生

我有什么明显的遗漏吗

我的代码如下所示：

// 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);
        }

    }
};

---

敲除不应用您的绑定，因为没有ko.applyBindings。所以，只需添加ko.applyBindings{}；在代码的底部

这里有最新消息

注意：您可以使用F12和调试器调试代码；关键词。例如：

编写调试器；在init函数中 在您喜爱的浏览器中按F12，您会看到绑定未被调用

---

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

GSerjo提到的同样问题也存在于小提琴中——没有使用ko.ApplyBinding。它刚刚被注释掉了，所以修复了自动完成显示

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

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

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>

---

请看

是的，我想知道这一点，因为我已经在为另外两个视图模型使用ko.applybindings。所以我想那就足够了。我是否可以以某种方式执行这个var addViewModel=ko.bindingHandlers.autocompletedAddress？我一直在使用Firebug，但不知道调试程序；。谢谢。是的，你可以，它是JavaScript：但是你的目标是什么？您可以将ko.bindingHandlers.autocompletedAddress脚本移动到最高加载级别。i、 e.首先，您的绑定将被初始化，然后appliedI根据您以前/已删除的问题对此进行了处理。看见我更新了这篇文章中提供的数据。真是太棒了@Origineil！你能在这里发布一个简短的答案吗？这个解决方案有一个问题。您正在重置输入字段。我需要保留内容。你是怎么做到的？我觉得这是一个全球性的问题。为了保持服务器端加载的数据，您必须编写额外的代码。有没有办法保存服务器端数据？不太清楚保留和重置是什么意思。如果将初始viewmodel设置为服务器端数据的viewmodel，则将显示该数据。因此，您将用服务器上的某个地址项替换空对象{}，而不是address:ko.observable{}。搜索数据或项目始终是从服务器加载的数据的表示形式。因此，我必须将服务器数据传递给viewModel，然后反过来将其放回HTML中？这似乎有点落后。难道我不能直接将数据输出到html中，然后告诉Knockout别管它吗我知道Angular JS将来自服务器的数据保持原样。viewModel通过ko.applyBindings放入HTML中。您只需告诉它您希望它如何显示。HTML是绑定到模型的，因此如果您加载了应用程序之外的内容，knockout就不知道了。所以，如果我没有弄错的话，你是在问为什么不能在html中使用value='Oslo'之类的词，而让knockout不能改变这一点？讨论转到了另一个位置

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