Question

我已经从.Net传递了一个模型到我的View模型，它是一个Object，包含几个字段和一个List，每个都有另一个List。

所以，一个带有列表列表的对象。

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

在我的Knockout View模型中，我只有：

global:
  WORKER_TAG_PREFIX:"dev"
  HOST_PROVIDER:"heroku-prod"

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

所以在渲染表格时，我会这样做：

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

（'Components'是外部列表中列表的名称）

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

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

警报显示Id，但描述错误（“Craig”），因为它不是一个功能。

如何在ObservableArray中制作可观察的列表？

（更清楚的是，我传入的模型是一个对象，其中包含一个名为TemplateGroups的List ...然后该列表中的每个项目都包含一个名为'Components'的List。它是其中一个组件的Id我正在展示，但我需要将该列表设为Observable。

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

注意，我的加载方法：

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

}

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)

Knockout Observable Array of Observable Array

1 个答案: