淘汰赛添加到数组的数组

Posted 2023-03-27

【中文标题】淘汰赛添加到数组的数组

【英文标题】：Knockout add to array of an array

【发布时间】：2019-02-17 00:38:30

【问题描述】：

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

我有以下，一个人，它有一个 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 ”

如何将项目推送到 WorkItems 的“嵌套”操作计划数组？谢谢

编辑 -

按要求提供图片 -

在此之前是主窗体中的“添加工作项”按钮。当按下 Save 时，WorkItem 会显示在表格行中（一切正常）

【问题讨论】：

请添加图片，我对这个问题很感兴趣，但不知道如何提供帮助。

图片添加感谢

【参考方案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 没有在“兄弟”上下文中定义，它们是每个 WorkItem 的属性

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

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

    </tbody>

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

你最好的选择是重构你的虚拟机！

编辑 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);
         ;
    

并在你的工作项上调用它

someWorkItemInstance.addActionPlan(new ActionPPlanVM())

【讨论】：

感谢您的回复，但是...由于 ActionPlans 带有引导模式，我似乎无法实现这种类型的绑定。是否存在可以在 foreach: 中反映这一点的语法，例如“foreach: WorkItems.ActionPlans”？

您可以使用剔除无容器语法（也称为虚拟元素）来做到这一点。我会用一个例子在一分钟内编辑答案

抱歉延迟回复这个（我一直在另一个项目）不幸的是我对虚拟元素没有任何运气......你提到重组我的虚拟机关于最佳方法的任何想法这？谢谢

你想如何准确地显示它们？我的意思是你有一个关于每个人的 WorkItems 列表，每个 WorkItems 都有一个 ActionPlans 列表。你想如何在 ui 中表示它们？使用您当前的 html，就好像您正在尝试渲染 2 个表格，所以假设您有 3 个工作项，每个工作项都有 2 个行动计划，您只想要 1 个包含项目的表格和一个只包含所有行动计划的完全独立的表格？你确定你没有尝试让第一个表条目与第二个表条目有关联的 html 吗？使用 2x3 关系给我画一些东西并上传一个 img：P

感谢您的回复。基本上 Person 是一种可以添加工作项的表单。单击添加工作项按钮将打开一个引导模式。在这里您可以填写工作项目表格 - 完美运行。没有的一点是您可以动态地将行添加/删除到 ActionPlans 表中，因此如果您仍然需要，集合..il 会敲出一张图像...