将对象添加到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>

这很有效。都好。我有一个按钮，我想用它来添加一个新的tabl。我允许用户键入名称，然后单击按钮。我想添加一个新标签。因此，我尝试向Data对象添加一个新项目：

但首先，要检查我的标签组是否已被观察，我只需将名称更改硬编码到第一个标签：

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

执行时，第一个选项卡显示名称更改。此外，当我将self.Data（）发回给我的控制器时，会反映出这些变化。

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

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

执行此操作，但不会显示新标签。

但是，当我将模型发布回我的.Net控制器时，我会看到新项目。

为什么新标签永远不会出现？也许我正在添加到obervableArray错误？我担心为什么我需要一直使用（）引用对象。

Answer 1

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

因为Data是包含对象的可观察对象，所以需要将其作为函数来调用以获取此对象：

Data()

现在，您可以使用PlateTemplateGroups向<{1}}添加元素：

push()

以下是Codepen为例。您可以点击该按钮，然后添加 self.Data().PlateTemplateGroups.push( ... ) 。