敲除添加到数组的数组

Question

我正在寻找一种方法，使用 knockout 和 knockout 映射将项目添加到属于另一个数组中的项目的数组。

我有以下内容，一个 Person，它有一组 WorkItems，还有一组 ActionPlans。人员 > 工作项 > 行动计划

敲除代码如下-

var PersonViewModel = function(data) {
var self = this;
ko.mapping.fromJS(data, trainingCourseItemMapping, self);

self.addWorkItem = function() {
    var WorkItem = new WorkItemVM({
        Id: null,
        JobSkillsAndExpDdl: "",
        JobSkillsAndExperience: "",
        ActionPlans: ko.observableArray(),
        PersonId: data.Id
        })
   self.WorkItems.push(WorkItem)
};

self.addActionPlan = function () {
    var actionPlan = new ActionPlanVM({
        Id: null,
        priorityAreaStage: "",
        goal: "",
        action: "",
        byWho: "",
        byWhen: ""
        WorkItemId: data.Id
    });
    self.ActionPlans.push(actionPlan);
};
}

数组映射

var trainingCourseItemMapping = {
'WorkItem': {
    key: function(workitem) {
        return ko.utils.unwrapObservable(workitem.Id);
    },
    create: function(options) {
        return new WorkItemVM(options.data);
    },
    'ActionPlans': {
        key: function (actionPlanItem) {
            return ko.utils.unwrapObservable(actionPlanItem.id);
        },
        create: function (options) {
            return new ActionPlanVM(options.data);
        }

    }
}

数组项映射

var WorkItemVM = function(data) {
    var self = this;
    ko.mapping.fromJS(data, trainingCourseItemMapping, self);
}

var ActionPlanVM = function(data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
}

在我看来，我想要以下内容（已编辑）-

<tbody data-bind="foreach: WorkItems">
//body table html here
</tbody>

<!--ko foreach: WorkItems-->
<tbody data-bind="foreach: ActionPlans">
//body table html here
</tbody>
<!--/ko-->

错误

我目前得到的错误是-

无法处理绑定"click: function(){return addActionPlan }"

如何将项目推送到工作项目的 "nested" 行动计划数组？谢谢

编辑 -

请求的图像 -

在此之前是主窗体中的 "add work item" 按钮。当按下保存时，WorkItem 显示在 table 行中（一切正常）

Answer 1

需要注意的一件事是您在 WorkItems 中有 ActionPlans，因此您的绑定也应该反映这一点：

<tbody data-bind="foreach: WorkItems">
//body table html here
    <tbody data-bind="foreach: ActionPlans"> /*ActionPlans exists in this context*/
    //body table html here
    </tbody>
</tbody>

您当前的 HTML 行动计划未在其绑定上下文中定义这是特定错误的来源，ActionPlans 未在 "sibling" 上下文中定义，它们是每个 WorkItem

的属性

编辑：您也可以尝试虚拟元素、knockout 的无容器语法，尽管通常不建议这样做（相对于框架的其余部分性能不佳，minifier 删除注释等可能会出现一些问题）

<tbody data-bind="foreach: WorkItems">
    //body table html here

    </tbody>

<!-- ko foreach: WorkItems -->
    <tbody data-bind="foreach: ActionPlans"> 
    </tbody>
<!-- /ko -->

您认为最好的选择是重构您的 VM！

编辑 2：在你的 personVM 中试试这个

self.addActionPlanToWorkItem = function (workItem) {
    var actionPlan = new ActionPlanVM({
        Id: null,
        priorityAreaStage: "",
        goal: "",
        action: "",
        byWho: "",
        byWhen: ""
        WorkItemId: workItem.Id
   });
    workItem.ActionPlans.push(actionPlan);
};

从任何地方调用它并传入您当前的活动 WorkItem，它会向您的模型添加一个新的空 ActionPlan。

或者你可以这样试试：用这个

替换 workItemVM

    var WorkItemVM = function(data) {
        var self = this;
        ko.mapping.fromJS(data, trainingCourseItemMapping, self);
        self.addActionPlan = function(actionPlanToAdd) 
        {
            self.ActionPlans.push(actionPlanToAdd);
         };
    }

并在您的 workItems 上将其称为

someWorkItemInstance.addActionPlan(new ActionPPlanVM())

敲除添加到数组的数组

Knockout add to array of an array

javascript

asp.net-mvc

knockout-mapping-plugin

knockout-2.0

knockout.js