Knockout.js 바인딩이 업데이트되지 않았습니다.

Question

API에서 데이터를 검색 한 후 테이블을 채우려고합니다.

관련 HTML :

<tbody data-bind="foreach: places"> 
    <tr> 
     <td data-bind="text: clientName"></td> 
     <td data-bind="text: name"></td> 
     <td data-bind="text: address1"></td> 
     <td data-bind="text: address2"></td> 
     <td data-bind="text: city"></td> 
     <td data-bind="text: county"></td> 
     <td data-bind="text: country"></td> 
     <td data-bind="text: dateAdded"></td> 
    </tr>   
</tbody> 

JS :

function Place(data) { 
this.clientName = ko.observable(data.ClientName); 
this.name = ko.observable(data.Name); 
this.address1 = ko.observable(data.Address1); 
this.address2 = ko.observable(data.Address2); 
this.city = ko.observable(data.City); 
this.county = ko.observable(data.County); 
this.country = ko.observable(data.Country); 
this.dateAdded = ko.observable(data.DateAdded); 
} 

function PlaceListViewModel() { 
var self = this; 
self.places = ko.observableArray([]); 

$.ajax({ 
    type: "POST", 
    url: "SubscriberDashboard/SearchPlaces", 
    contentType: "application/json", 
    data: { "SearchTerm": "" }, 
    success: function (data) { 
     var temp = []; 
     $.each(data.places, function (placeData) { 
      temp.push(new Place(placeData)); 
     }); 
     self.places(temp); 
     console.log(self.places()); 
    } 
}); 

} 

ko.applyBindings(new PlaceListViewModel()); 

데이터 미세로드, AJAX 호출 끝에 CONSOLE.LOG 장소 오브젝트의 배열을 보여준다. 마찬가지로 적절한 수의 <tr> 요소가 렌더링되지만 <td> 요소에는 텍스트가 없습니다.

편집 :

function PlaceListViewModel() { 
var self = this; 
self.places = ko.observableArray([]); 

$.ajax({ 
    type: "POST", 
    url: "SubscriberDashboard/SearchPlaces", 
    contentType: "application/json", 
    data: { "SearchTerm": "" }, 
    success: function (data) { 
     $.each(data.places, function (placeData) { 
      self.places.push(new Place(placeData)); 
     }); 
     console.log(self.places()); 
    } 
}); 

} 

Answer 1

당신은 Place Model 실제적인 데이터에 인덱스를 전달하고 있습니다. $.each function의 첫 번째 매개 변수는 index이고 두 번째 매개 변수는 element입니다.

$ .each() 함수 (정수 인덱스, 요소 요소).

각 하위 모델에 대해 var self = this을 사용하는 것이 좋습니다. 충돌을 피해야합니다.

예 : https://jsfiddle.net/kyr6w2x3/94/

$.each(data, function (index , placeData) { 
    self.places.push(new Place(placeData)); 
});