foreach 内淘汰 foreach

Posted 2023-03-27

【中文标题】foreach 内淘汰 foreach

【英文标题】：Knockout foreach within foreach

【发布时间】：2019-03-16 10:11:10

【问题描述】：

举个例子——

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

我试图在“此处的表格数据”中仅显示属于当前迭代 WorkItem 的 ActionPlan 项。

问题 -

我的问题是当前“此处的表格数据”显示所有工作项的所有操作计划。

我的模型结构为 Person > WorkItem(array) > ActionPlan(array)

我试过了

   <!--ko foreach: WorkItems-->
      <tbody data-bind="foreach: $parent.ActionPlans">
         // table data here
      </tbody>
   <!--/ko-->

添加 $parent 不会显示任何行动计划...

------------- 按要求编辑 - --------

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

编辑 2 ----------

这是渲染的 html，您可以看到它渲染了一个 foreach：ActionPlans for each WorkItem with an ActionPlan

【问题讨论】：

你能展示你的javascript代码吗？

谢谢，已添加 JS。

【参考方案1】：

我认为您不需要包含 $parent，因为它已经在 WorkItems binding context 中。

Fiddle

【讨论】：

非常感谢小提琴。我正在使用 ko.mapping 进行 VM 映射，所以我想知道这是否会妨碍您？