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であり、2番目のパラメータはelementです。

$ .each（）関数（整数インデックス、要素要素）。

また、各サブモデルにはvar self = thisがあることをお勧めします。競合を避ける必要があります。

例：https://jsfiddle.net/kyr6w2x3/94/

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