knockout.js - foreach 内淘汰 foreach
问题描述
举个例子——
<!--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
解决方案
我认为您不需要包含$parent
,因为它已经在WorkItems
binding context
.
推荐阅读
- python - Keras.applications 源代码的更改导致 localhost 中缺少变量时出错
- ansible - 通过 one_vm 配置多个后如何在 OpenNebula 中的虚拟机上继续执行 ansible 脚本
- wpf - WPF - 在 App.Resource 中定义 SolidColorBrush 的别名(StaticResourceExtension?)
- reactjs - 如何在 react 和 react native 中使用现有的放大后端
- microsoft-graph-api - O365 图表,在某些邮箱上下载邮件时出现奇怪错误,而不是全部
- django-rest-framework - DRF 序列化程序问题
- reactjs - React 路由器无法导航
- azure-devops - 如何识别已经与 terraform 配置匹配的基础设施
- mongodb - 读取oplog最早记录Kafka Connect
- flutter - Flutter web tabbar滚动问题与非主滚动控制器