我正在寻找一种方法,使用 knockout 和 knockout mapping 将一个项目添加到属于另一个数组中的项目的数组。
我有以下内容,一个 Person,它有一个 WorkItems 数组和一个 ActionPlans 数组。人 > 工作项 > 行动计划
knockout 代码如下——
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-->
错误
我目前得到的错误是 -
无法处理绑定(bind)“click: function(){return addActionPlan }”
如何将项目推送到 WorkItems 的“嵌套”行动计划数组?谢谢
编辑-
请求的图片 -
在此之前是主表单中的“添加工作项”按钮。当按下 Save 时,WorkItem 显示在表格行中(一切正常)
最佳答案
需要注意的一件事是您在 WorkItems 中有 ActionPlans,因此您的绑定(bind)也应该反射(reflect)这一点:
<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 未在其绑定(bind)上下文中定义 这是特定错误的来源,ActionPlans 未在“兄弟”上下文中定义,它们是每个 WorkItem 的属性
编辑: 您也可以尝试虚拟元素、knockout 的无容器语法,尽管通常不建议这样做(相对于框架的其余部分性能不佳,minifier 删除注释等可能会出现一些问题)
<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);
};
}
并在您的 workItems 上将其称为
someWorkItemInstance.addActionPlan(new ActionPPlanVM())
关于javascript - knockout 添加到数组的数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52294020/