映射嵌套的 KO ViewModel答案

【问题标题】：Mapping nested KO ViewModels映射嵌套的 KO ViewModel
【发布时间】：2023-03-18 11:40:02
【问题描述】：

我正在尝试使用 Knockout 的映射插件映射嵌套的 ViewModel（三个深度级别）。运行此代码时，只有第一个 Level 会被正确映射。我在这里做错了什么？

提前致谢

这是我的代码：

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

【问题讨论】：

标签： javascript jquery mvvm knockout.js

【解决方案1】：

我只是在玩弄这些物品时自己弄明白了。我希望这可以帮助遇到同样麻烦的人。

代码如下：

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)

【讨论】：