映射嵌套的 KO 视图模型

Mapping nested KO ViewModels

本文关键字：视图 模型 KO 嵌套 映射      更新时间：2023-09-26

我正在尝试使用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);

我刚刚在玩这个对象时自己想通了。我希望这能帮助那些遇到同样麻烦的人。

这里的代码：

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)
相关文章：