jquery - 将对象添加到 ObservableArray

Question

我有一个动态数据对象，因为它是从 WebApi 加载数据调用中读取的......然后使用以下方法将其转换为可观察对象:

 $.get("/api/PlateTemplate/Get", { id: self.TemplateId() }).done(function (data) {
            ko.mapping.fromJS(data, {}, self.Data);  
            self.IsDataLoaded(true);
        });

其中一个字段是另一种对象类型的可观察数组。我用它在我的 UI 上呈现一些选项卡。

<div id="plateTemplate" data-bind="with: Data">
<ul class="nav nav-tabs" data-bind="foreach: PlateTemplateGroups">
                <li data-bind="css: {active: $index()==0}"><a data-toggle="tab" data-bind="attr: {href: ('#tabId' + $index())}"><span data-bind="text: Description"></span></a></li>
</ul>

这有效。都好。我有一个按钮，我想用它来添加新选项卡。我允许用户输入名称，然后单击按钮。我想添加一个新选项卡。因此，我尝试向我的数据对象添加一个新项目:

但首先，要检查我的选项卡组是否已“观察到”，我只需将名称更改硬编码到第一个选项卡:

self.Data().PlateTemplateGroups()[0].Description("hahahaha");

当执行时，第一个选项卡显示名称发生变化。另外，当我将 self.Data() 发布回我的 Controller 时，更改会得到反射(reflect)。

然后我尝试添加一个新项目:

self.Data().PlateTemplateGroups().push({ Id: ko.observable(0), Description: ko.observable(name), Components: ko.observableArray([]) });

这会执行，但不会出现新选项卡。

但是，当我将模型发布回 .Net Controller 时，我看到了新项目。

是否有任何原因导致新选项卡从未出现？也许我错误地添加到 obervableArray 中？我担心为什么我也需要一直使用 () 引用对象。

Answer 1

在您的 ViewModel 中，您有一个可观察的属性Data。此属性还有其他属性，例如名为 PlateTemplateGroups 的可观察数组。

因为Data是一个包含对象的可观察对象，所以您需要将其作为函数调用来获取该对象:

Data()

现在，您可以使用 push() 将元素添加到 PlateTemplateGroups:

 self.Data().PlateTemplateGroups.push( ... )

这是一个Codepen例如。您可以单击该按钮，然后添加一个 TemplateGroup。