可观察数组的淘汰赛可观察数组

Question

我已经将模型从.Net传递给我的视图模型，该模型是一个Object，包含一些字段和一个List，每个字段都有另一个List。

因此，具有列表列表的对象。

在我的视图上，我将其表示为一些数据，并带有一个选项卡列表（第一个列表），然后每个选项卡都有一个数据网格。

在我的淘汰赛视图模型中，我只有：

self.Name = ko.observable("");
self.Width = ko.observable(0);
self.Height = ko.observable(0);

self.TemplateGroups = ko.observableArray();

因此，我的主要对象带有一个可观察的数组（第一个列表）。 但是，其中的列表是不可观察的。

因此，在渲染表格时，我会执行以下操作：

<div class="tab-content" data-bind="foreach: TemplateGroups">

并渲染每个标签。 然后在每个选项卡中，执行以下操作：

<tbody data-bind="foreach: $data.Components">
      <tr  style="cursor: pointer" data-bind="click: $parents[1].ClickedIt">

（“组件”是外部列表中列表的名称）

问题是，在我的ClickIt函数上，我正在显示单击的行的Idof，它可以正常工作。 然后，我只是尝试更改此外部列表的“描述”字段，但是...这不是一个函数，因此，没有观察到：

self.ClickedIt = function () {
    alert(this.Id);
    this.Description("Craig");

}

警报显示ID，但Description（“ Craig”）错误，因为它不是函数。

如何在ObservableArray中使列表可观察？

（更清楚地说，我传入的模型是一个对象，其中包含一个名为TemplateGroups ...的列表，然后该列表中的每个项目均包含一个名为“ Components”的列表。这是我所使用的其中一个Components的ID显示，但我需要使该列表可观察。

编辑：这似乎是我在寻找（ http://jsfiddle.net/rniemeyer/bZhCk/ ），但是...我不是以相同的方式定义数组。 相反，它们是从.Net类传入的（因此，我认为已转换为JSON）。 该.Net类包含另一个.Net类的列表，该类具有一个List。

注意，我的加载方法：

self.loadData = function () {
        $.get("/api/PlateTemplate/Get", { id: self.TemplateId() }).done(function (data) {
            self.Name(data.Description);
            self.Width(data.Width);
            self.Height(data.Height);
            self.TemplateGroups(data.PlateTemplateGroups);
        });
    }

Answer 1

self.TemplateGroups的内容是data.PlateTemplateGroups ，它是一个数组，其内容不是可观察的属性（它们是javascript对象）。

如果希望此数组中的此对象变为可观察对象，则可以使用Mapping Plugin ：

self.loadData = function () {
    $.get("/api/PlateTemplate/Get", { id: self.TemplateId() }).done(function (data) {
        self.Name(data.Description);
        self.Width(data.Width);
        self.Height(data.Height);
        self.TemplateGroups(
          ko.mapping.fromJS(     //   <--- new
             data.PlateTemplateGrou‌​ps));
    });
}

这样，所有属性都变为可观察的。

如果需要将此数据转换为Json格式，可以使用ko.mapping.toJS() ：

ko.mapping.toJS(self.TemplateGroups)