jQuery autocomple 및 knockoutjs 관측 가능한 배열

Question

jquery 자동 완성 기능을 사용하고 가능한 값을 선택할 때 knockoutjs 생성 목록을 업데이트하려고합니다. 그러나 Select 메서드 내에서 addItem 함수를 호출하면 목록이 업데이트되지 않습니다. 예상되는 동작은 선택한 항목 값이 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/

귀하의 문제는 오히려 이전에 인스턴스화 그 appViewModel 전달보다는 ko.applyBindings 문에 새로운 AppViewModel를 인스턴스화 있다고했다 select에서 사용 중입니다.