映射嵌套的KO ViewModels

时间:2016-02-08 19:53:57

标签: javascript jquery mvvm knockout.js

我尝试使用Knockout的映射插件映射嵌套的ViewModel(三个深度级别)。运行此代码时,只会正确映射第一个级别。我在这里做错了什么?

提前致谢

这是我的代码:

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);

1 个答案:

答案 0 :(得分:0)

我在玩这个物体的过程中自己想出来了。我希望这可以帮助那些遇到同样麻烦的人。

这里是代码:

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)