将 JSON 数据映射到具有特定视图模型类型的 Knockout observableArray

Map JSON data to Knockout observableArray with specific view model type

提问by KodeKreachor

Is there a way to map a JSON data object to an observable array and then in turn have each item of the observable array be initialized into a specific type of view model?

有没有办法将 JSON 数据对象映射到可观察数组，然后依次将可观察数组的每个项目初始化为特定类型的视图模型？

I've looked at all of knockout's documentation along with the knockout and mapping examples here and I can't find any answer that works for what I'm after.

我已经查看了所有淘汰赛的文档以及这里的淘汰赛和映射示例，但找不到任何适合我所追求的答案。

So, I have the following JSON data:

所以，我有以下 JSON 数据：

    var data = {
    state : {
        name : 'SD',
        cities : [{
            name : 'Sioux Falls',
            streets : [{
                number : 1
            }, {
                number : 3
            }]
        }, {
            name : 'Rapid City',
            streets : [{
                number : 2
            }, {
                number : 4
            }]
        }]
    }
};

And I have the following view models:

我有以下视图模型：

var StateViewModel = function(){
    this.name = ko.observable();
    this.cities = ko.observableArray([new CityViewModel()]);
}

var CityViewModel = function(){
    this.name = ko.observable();
    this.streets = ko.observableArray([new StreetViewModel()]);
}

var StreetViewModel = function(){
    this.number = ko.observable();
}

Is it possible, with the given data structure and using knockout's mapping plugin, to have the resulting StateViewModel contain an observableArray populated with 2 CityViewModels, and each CityViewModel containing an observableArray populated with 2 StreetViewModels?

使用给定的数据结构和使用淘汰赛的映射插件，是否有可能让生成的 StateViewModel 包含一个填充有 2 个 CityViewModel 的 observableArray，而每个 CityViewModel 包含一个填充有 2 个 StreetViewModel 的 observableArray？

Currently using the mapping plugin I'm able to get it to map to a StateViewModel, but the 'cities' and 'streets' collections are populated with generic objects instead of instances of my City and Street view models.

目前使用映射插件，我能够将它映射到 StateViewModel，但是“城市”和“街道”集合填充了通用对象，而不是我的城市和街道视图模型的实例。

They end up with the correct observable properties and values on them, they're just not instances of my view models, which is what I'm after.

它们最终具有正确的可观察属性和值，它们不是我的视图模型的实例，这正是我所追求的。

回答by Artem

Check this http://jsfiddle.net/pTEbA/268/

检查这个http://jsfiddle.net/pTEbA/268/

Object.prototype.getName = function() { 
   var funcNameRegex = /function (.{1,})\(/;
   var results = (funcNameRegex).exec((this).constructor.toString());
   return (results && results.length > 1) ? results[1] : "";
};

function StateViewModel(data){
    this.name = ko.observable();
    ko.mapping.fromJS(data, mapping, this);
}

function CityViewModel(data) {
    this.name = ko.observable();
    ko.mapping.fromJS(data, mapping, this);
}

function StreetViewModel(data) {
    this.name = ko.observable();
    ko.mapping.fromJS(data, mapping, this);
}

var mapping = {
    'cities': {
        create: function(options) {
            return new CityViewModel(options.data);
        }
    },
    'streets': {
        create: function(options) {
            return new StreetViewModel(options.data);
        }
    }
}


var data = { state: {name:'SD', cities:[{name:'Sioux Falls',streets:[{number:1},{number:3}]},
                                        {name:'Rapid City',streets:[{number:2},{number:4}]}]}};

var vm = new StateViewModel(data.state)
console.log(vm);
console.log(vm.getName());
console.log(vm.cities());
console.log(vm.cities()[0].getName());
console.log(vm.cities()[0].streets());
console.log(vm.cities()[0].streets()[0].getName());
?