我已将一个模型从 .Net 传递到我的 View 模型,它是一个对象,包含一些字段和一个列表,每个列表都有另一个列表。
所以,一个带有列表列表的对象。
在我的 View 中,我将其表示为一些数据,带有选项卡列表(第一个列表),然后每个选项卡都有一个数据网格。
在我的 Knockout View 模型中,我只有:
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">
(“Components”是外部列表中的列表名称)
问题是,在我的 ClickIt 函数上,我显示了我单击的行的 Id,并且它有效。然后我只是想更改此外部列表的“描述”字段,但是......它不是一个函数,因此,没有观察到:
self.ClickedIt = function () {
alert(this.Id);
this.Description("Craig");
}
警报显示 ID,但描述(“Craig”)出现错误,因为它不是函数。
如何使 ObservableArray 中的列表可观察?
(更清楚地说,我传入的模型是一个对象,其中包含一个名为 TemplateGroups 的列表...然后该列表中的每个项目都包含一个名为“Components”的列表。它是这些组件之一的 Id我正在显示,但我需要使该列表可观察。
编辑:这似乎是我正在寻找的( http://jsfiddle.net/rniemeyer/bZhCk/ ),但是......我没有以相同的方式定义我的数组。相反,它们是从 .Net 类传入的(因此,我认为转换为 JSON)。并且该 .Net 类包含另一个 .Net 类的 List,该类也有一个 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);
});
}
最佳答案
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.PlateTemplateGroups));
});
}
这样,所有属性都成为可观察的。
如果您需要将此数据转换为 Json 格式,您可以使用 ko.mapping.toJS()
:
ko.mapping.toJS(self.TemplateGroups)
关于javascript - knockout 可观察数组的可观察数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44994156/