带有knockoutjs的数据绑定json集合

Question

我是使用 Knockoutjs 的新手，我遇到了一个让我很困惑的问题。我从服务器获取一个 json 对象，它是对象的集合，我正在尝试使用 knockoutjs 将其绑定到列表。不过，我缺少一些东西。我不确定如何在被绑定的视图模型中引用当前对象。

function GetGameListResponse(response)
{
    if (response.Error == null)
    {
        // this is my test, when I bind the collection directly everything works fine...
        //ko.applyBindings(response, document.getElementById('panGames'));

        // this doesn't work
        ko.applyBindings(new ListViewModel(response), document.getElementById('panGames'));
    }
}
function ListViewModel(response)
{
    var self            = this;

    // this is where the problem is I think, as 'response'
    self.Id             = ko.observable(response.Id);
    self.Name           = ko.observable(response.Name);
    self.Date           = ko.observable(response.Date);
    self.Description    = ko.observable(response.Description);

}

...这是它绑定到的html：

<table>
<thead>
<tr>
    <th>Name</th>
    <th>Date</th>
    <th>Description</th>
    <th>select</th>
</tr>
</thead>
<tbody data-bind="foreach: List">
<tr>
    <td data-bind="text: Name"></td>
    <td data-bind="text: Date"></td>
    <td data-bind="text: Description"></td>
    <td></td>
</tr>
</tbody>
</table>

JSON 是具有 Id、Name、Date 等的可预测对象集合，如果我不尝试使用视图模型将集合绑定到 UI，它可以正常工作。我一定在这里遗漏了一些简单的东西......

Answer 1

假设response 是这样的：

{
    List: [
        {
            Name: "Name",
            Date: "Date",
            Description: "Description"
        }
    ]
}

您的视图模型看起来像这样：

function ListViewModel(response)
{
    var self            = this;

    var list = [];
    for (var i = 0; i < response.List.length; i++) {
        list.push(new ListItemViewModel(response.List[i]));
    }
    self.List = ko.observableArray(list);
}

function ListItemViewModel(data)
{
    var self            = this;

    self.Id             = ko.observable(data.Id);
    self.Name           = ko.observable(data.Name);
    self.Date           = ko.observable(data.Date);
    self.Description    = ko.observable(data.Description);
}