jQuery的autocomple和可觀察到的knockoutjs陣列

Question

嘗試更新knockoutjs生成的列表中，當使用jQuery自動填充功能，並選擇一些可能的值。但是當我在Select方法中調用addItem函數時，list不會更新。預期的行爲是將所選項目值添加到knockoutjs items數組中。

MVC3例如觀點：

<input type="text" id="Name"/> 

<h4>Items</h4> 
<ul data-bind="foreach: items"> 
    <li> 
     <span data-bind="text: $index"></span>: 
     <span data-bind="text: name"></span> 
     <span data-bind="text: code"></span> 
     <a href="#" data-bind="click: $parent.removeItem">Remove</a> 
    </li> 
</ul> 

<script type="text/javascript"> 
    $(function() { 
     var appViewModel = new AppViewModel(); 
     function AppViewModel() { 
      var self = this; 

      self.items = ko.observableArray([]); 

      self.addItem = function (name, code) { 
       self.items.push({ name: name, code: code }); 
      }; 

      self.removeItem = function() { 
       self.items.remove(this); 
      }; 
     } 

     $('#Name').autocomplete({ 
      minLength: 1, 
      delay: 500, 
      source: function (request, response) { 
       $.ajax({ 
        type: "POST", 
        url: "/Home/SearchItems", 
        dataType: "json", 
        data: { searchText: request.term }, 
        success: function (data) { 
         if (data != undefined) { 
          response($.map(data, function (item) { 
           return { 
            label: item.Name, 
            value: item.Name, 
            code: item.Code 
           }; 
          })); 
         } 
        } 
       }); 
      }, 
      select: function (event, ui) { 
       appViewModel.addItem(ui.item.value, ui.item.code); 
      } 
     }); 

     ko.applyBindings(new AppViewModel()); 
    }); 
</script> 

Answer 1

這裏是一個工作版本：http://jsfiddle.net/jearles/vya7V/

你的問題是，你是在ko.applyBindings聲明實例化一個新AppViewModel，而不是傳遞appViewModel您先前實例並正在使用select。