Alan February 2016

Mapping nested KO ViewModels

I'm trying to map a nested ViewModel (three levels of depth) with Knockout's mapping plugin. When running this code, only the first Level will be mapped correctly. What am I doing wrong here?

Thanks in advance

Here is my Code:

var mapping = {
  create: function (options) {
    var levelOneItems = new levelOneModel(options.data)
    //Some computed observables for level one here...
    return levelOneItems;
  },
  'levelTwoItemList': {
    create: function (options) {
      var levelTwoItems = new levelTwoModel(options.data)
      //Some computed observables for level two here...
      return levelTwoItems;
    },
    'levelThreeItemList': {
      create: function (options) {
        var levelThreeItems = new levelThreeModel(options.data)
        //Some computed observables for level three here...
        return levelThreeItems;
      }
    }
  }
}
var levelOneModel = function (data) {
  ko.mapping.fromJS(data, {}, this);
}
var levelTwoModel = function (data) {
  ko.mapping.fromJS(data, {}, this);
}
var levelThreeModel = function (data) {
  ko.mapping.fromJS(data, {}, this);
}
var data = [
  {
    'LevelOneName': 'Apple1',
    'levelTwoItemList': [
      {
        'LevelTwoName': 'Apple2.1',
        'levelThreeItemList': [
          { 'LevelThreeItemName': 'Apple3.1' },
          { 'LevelThreeItemName': 'Apple3.2' }
        ]
      }, {
        'LevelTwoName': 'Apple2.2',
        'levelThreeItemList': [
          { 'LevelThreeItemName': 'Apple3.3' },
          { 'LevelThreeItemName': 'Apple3.4' }
        ]
      },  
    ]
  }
]

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

Answers


Alan February 2016

I've just figured it out myself while playing around with this objects. I hope this helps someone who got into the same trouble.

Here the code:

var mapping1 = {
  create: function (options) {
    var levelOneItems = ko.mapping.fromJS(options.data, mapping2)
    //Some computed observables for level one here...
    return levelOneItems;
  }
}
var mapping2 = {
  'levelTwoItemList': {
    create: function (options) {
      var levelTwoItems = ko.mapping.fromJS(options.data, mapping3)
      //Some computed observables for level two here...
      return levelTwoItems;
    }
  }
}
var mapping3 = {
  'levelThreeItemList': {
    create: function (options) {
      var levelThreeItems = new levelThreeModel(options.data)
      //Some computed observables for level three here...
      return levelThreeItems;
    }
  }
}

var levelOneModel = function (data) {
  ko.mapping.fromJS(data, {}, this);
}
var levelTwoModel = function (data) {
  ko.mapping.fromJS(data, {}, this);
}
var levelThreeModel = function (data) {
  ko.mapping.fromJS(data, {}, this);
}

var data = [
  {
    'LevelOneName': 'Apple1',
    'levelTwoItemList': [
      {
        'LevelTwoName': 'Apple2.1',
        'levelThreeItemList': [
          { 'LevelThreeItemName': 'Apple3.1' },
          { 'LevelThreeItemName': 'Apple3.2' }
        ]
      }, {
        'LevelTwoName': 'Apple2.2',
        'levelThreeItemList': [
          { 'LevelThreeItemName': 'Apple3.3' },
          { 'LevelThreeItemName': 'Apple3.4' }
        ]
      },
    ]
  }
]

var viewModel = ko.mapping.fromJS(data, mapping1)

Post Status

Asked in February 2016
Viewed 2,945 times
Voted 6
Answered 1 times

Search




Leave an answer