Knockout.js 绑定未更新答案

【问题标题】：Knockout.js bindings not updatedKnockout.js 绑定未更新
【发布时间】：2016-10-13 12:53:31
【问题描述】：

我在从我的 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 显示 Place 对象数组。同样，会渲染适当数量的 <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());
    }
});

}

【问题讨论】：

你的意思是 self.places(temp) 调用吗？我用新代码添加并编辑了问题（仍然不起作用）
抱歉，伙计们！

标签： javascript knockout.js

【解决方案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));
});

【讨论】：