将对象添加到 ObservableArray

Question

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

 $.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>

这行得通。都好。我有一个按钮，我想用它来添加一个新表。我允许用户输入名称，然后单击按钮。我想添加一个新标签。所以，我尝试向我的 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是一个包含对象的observable，所以需要将其作为函数调用来获取这个对象：

Data()

现在，您可以使用push() 向PlateTemplateGroups 添加元素：

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

这里以Codepen 为例。您可以单击该按钮并添加一个TemplateGroup。