Javascript 可观测阵列的剔除可观测阵列

我从.Net向视图模型传递了一个模型，它是一个对象，包含几个字段和一个列表，每个字段都有另一个列表

因此，一个具有列表列表的对象

在我看来，我将其表示为一些数据，带有一个选项卡列表（第一个列表），然后每个选项卡都有一个数据网格

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

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">

警报显示Id，但描述错误（“Craig”），因为它不是函数

我怎样才能使列表在我的可观察范围内，可观察

（更清楚地说，我传入的模型是一个对象，其中包含一个名为TemplateGroups的列表……然后该列表中的每个项目都包含一个名为“Components”的列表。它是我正在显示的其中一个组件的Id，但我需要使该列表可见

编辑：这似乎是我要寻找的（），但是…我并没有以相同的方式定义数组。相反，它们是从.Net类传入的（因此，我认为转换为JSON）。而该.Net类包含另一个.Net类的列表，该类有一个列表）

注意，我的加载方法：

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);
        });
    }

---

self.TemplateGroups

的内容是

data.PlateTemplateGroups

，这是一个数组，其内容是不可观察的属性（它们是javascript对象）

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

---

self.templateGroup

的内容不可见。它们是普通的javascript对象。也许您可以使用映射插件（）：

self.TemplateGroups（ko.Mapping.fromJS（data.PlateTemplateGroups）），在您的
self.loadData
中。这样，所有属性都可以观察到。@JoseLuis-完美！哇，非常感谢！这已经非常有效了。当我想将视图模型数据发布回同一结构时，是否有方法将视图模型映射回我接收到它的同一结构，并使用更新的值？那么，像“toJSON”之类的？另外，如果你能创造一个答案，我可以接受。谢谢（再一次！）谢谢@JoseLuis——不过，储蓄似乎是个问题。它是否像使用ko.mapping.toJS（self）将视图模型中的所有数据（包括列表和列表列表）以传递给视图模型的相同格式发送回我的WebAPI函数一样简单？还是我需要多做一点？因为我在尝试toJS方法时会出错。它在与我的点击/保存功能作斗争。@Craig我不知道，当我发送JSON时，我会这样做：
var unmap=ko.mapping.toJS（self）；var unmappedJSON=ko.toJSON（未映射）此代码进入我的ViewModel中的一个函数，因此我使用
self
。
self.ClickedIt = function () {
    alert(this.Id);
    this.Description("Craig");

}

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);
        });
    }

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));
    });
}

ko.mapping.toJS(self.TemplateGroups)