Knockout.js Bindungen nicht aktualisiert

Question

Ich versuche, eine Tabelle nach dem Abrufen von Daten aus meiner API zu füllen.

Relevant 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()); 

Die Daten werden geladen Ordnung, das console.log am Ende des Anrufs ajax zeigt eine Anordnung von Gegenständen Platz. Gleichermaßen wird die entsprechende Anzahl von <tr> Elementen gerendert, aber es gibt keinen Text in den <td> Elementen.

Edit:

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

Sie passieren Index der Place Model nicht die tatsächlichen Daten. Der erste Parameter für $.each function ist index, der zweite Parameter ist element.

$ .each() Funktion (Ganzzahlindex, Elementelement).

Auch ist es gut var self = this für jedes Teilmodell haben Sie Konflikte zu vermeiden haben.

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

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