Отображение нокаута - настройка создания с вложенными объектами

У меня возникла проблема с плагином отображения KnockoutJS, где мне нужно сделать следующее:

  • Настроить создание сопоставления объекта
  • Настроить создание сопоставления массива вложенных объектов из # 1.

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

  • Адам Смит
  • Бобу 5 лет.
  • Крису 7 лет

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

ko.mapping.fromJS(additionalData, parentMapping, viewModel);

К сожалению, для этого требуется, чтобы оба родителя были пустыми и отображались дважды. Это неприемлемо, поскольку в действительности код имеет гораздо более глубокую иерархию.

В дополнение к вышесказанному, я попытался добавить следующий код в parentMapping:

var mapping = { 'ignore': ["children"] };
var innerModel = ko.mapping.fromJS(options.data, mapping);
//for brevity
innerModel.children = ko.mapping.fromJS(options.data.children, childMapping);

Это приводит к отображению дочерних объектов в исходное сопоставление. Тем не менее, все последующие сопоставления игнорируются. Свойство children игнорируется.

Есть ли способ настроить создание как родительского, так и дочернего объектов с помощью Nockout Mapping?

Спасибо.

Ответы

Ответ 1

http://jsfiddle.net/5cfa3/23/

var viewModel = {};

var data = {
  id: "1",
  firstName: 'Adam',
  lastName: "Smith",
  children: [ {id: "2", name: "Bob", age: 5}, {id: "3", name: "Chris", age: 7 }]
};

var Parent = function(data){
  ko.mapping.fromJS(data, mapping, this)
};

var mapping = {
  create:function(options){
    var parent = new Parent(options.data);
    parent.fullName = ko.computed(function(){
        return parent.firstName() + " " + parent.lastName();
    });
    return parent;
  },
  'children': {
     create: function(options) {
         options.data.description = ko.computed(function(){
             return options.data.name + " is " + options.data.age + " years old ";
         });
         return ko.mapping.fromJS(options.data);         
     }
   }
};

viewModel = ko.mapping.fromJS(data, mapping);

ko.applyBindings(viewModel);