将对象添加到集合中

Question

我有一个包含表单的单页MVC 4应用程序（称之为ParentForm）。有ChildForm个ParentForm附加到ChildForm。单击按钮时，每个public class ParentFormViewModel { public ParentForm parent { get; set; } public IEnumerable<ChildFormA> childrenA { get; set; } public IEnumerable<ChildFormB> childrenB { get; set; } public GeneralFormViewModel() { parent = new ParentForm (); childrenA = new List<ChildFormA>(); childrenB = new List<ChildFormB>(); } } 都会弹出一个模态对话框，如下所示：

我的ASP.NET ViewModel如下所示：

function ParentFormViewModel(dozens of parameters) {

    var self = this;

    self.property = new ko.observable(property);
    // dozens of these...

    self.childrenA = ko.observableArray(ChildFormA);
    self.childrenB = ko.observableArray(ChildFormB);

    self.AddChildFormA = function () {
        self.childrenA.push(???);
    }

    var viewModel = new ParentFormViewModel();
    ko.applyBindings(viewModel);

我不知道如何制作代表这个的Knockout.JS ViewModel。我的ViewModel目前看起来像这样：

ChildFormB

如何创建＆＃34;子表单的实例＆＃34; （例如，ParentForm.childrenA）并将其添加到父表单＆＃34;的子表单集合中（例如，ParentForm）？ Knockout.JS collection example并没有帮助我弄清楚如何将除字符串之外的任何内容添加到ChildForm的集合中。我希望ParentForm包含在{{1}} ViewModel中的列表中。

Answer 1

最简单的方法是使用jQuery $.map函数将每个项目映射到一个新对象o ChildFormA或ChildFormB。这在教程中进行了演示：http://learn.knockoutjs.com/#/?tutorial=loadingsaving

没有必要使childA和childrenB可观察数组，因为看起来这些数据总是来自服务器，看起来你不会动态地将子项添加到这个数组。如果要动态添加子项并需要更新屏幕，请将它们声明为observableArrays。

self.parent = new ParentForm(model.parent);
self.childrenA = $.map(model.childrenA, function(item) { return new ChildFormA(item) });
self.childrenB = $.map(model.childrenB, function(item) { return new ChildFormB(item) });

var ParentForm = function (parentForm) {
    var self = this;
    self.name = ko.observable(parentForm.name);
    self.age = ko.observable(parentForm.age);
};

在这里，我还添加了ChildFormA和ChildFormB，它们是来自服务器的子数组中每个项目的实例化。

var ChildFormA = function (childFormA) {
    var self = this;
    self.name = ko.observable(childFormA.name);
    self.age = ko.observable(childFormA.age);
};

var ChildFormB = function (childFormB) {
    var self = this;
    self.name = ko.observable(childFormB.name);
    self.cost = ko.observable(childFormB.cost);
};

如果您确实想要使用诸如self.AddChildFormA函数之类的函数添加另一个孩子，那么您将推送一个新的ChildFormA实例。

self.AddChildFormA = function () {
    self.childrenA.push(new ChildFormA({name: 'Lucy', age: 24}));
}

http://jsfiddle.net/tfdeLs7u/