可觀察數組的淘汰賽可觀察數組

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)