Knockout добавить в массив массива - PullRequest
Новая
       23

Knockout добавить в массив массива

0 голосов
/ 12 сентября 2018

Я ищу способ добавить элемент в массив, принадлежащий элементу в другом массиве, используя отображение выбивки и выбивания.

У меня есть следующее: Person, у которого есть массив WorkItems, у которого есть массив ActionPlans. 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-->

Error

Ошибка, которую я сейчас получаю -

Невозможно обработать привязку "click: function () {return addActionPlan}"

Как я могу поместить элемент в «вложенный» массив плана действий WorkItems? Спасибо

Редактировать -

Изображение по запросу -

enter image description here

Перед этой кнопкой «Добавить рабочий элемент» в основной форме. Когда нажата кнопка «Сохранить», WorkItem отображается в строке таблицы (все работает нормально)

1 Ответ

0 голосов
/ 12 сентября 2018

Следует отметить, что у вас есть ActionPlans WITHIN WorkItems, поэтому ваши привязки должны отражать это тоже: 

<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 не определены в контексте их привязки. Здесь возникает конкретная ошибкапроисходит из-за того, что ActionPlans не определяются в контексте «одного уровня», они являются свойствами каждого WorkItem

РЕДАКТИРОВАТЬ: вы также можете попробовать виртуальные элементы, нокаутный синтаксис нокаута, хотя в общем это не рекомендуется (относительно плохая производительностьв остальной части фреймворка могут возникать некоторые проблемы с удалением комментариев и т.д. в minifier *) 

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

    </tbody>

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

Вам лучше всего подумать о реструктуризации вашей виртуальной машины!

РЕДАКТИРОВАТЬ 2: Попробуйте это в своей персоне VM

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())
...