将 JSON 数据映射到具有特定视图模型类型的 Knockout observableArray [英] Map JSON data to Knockout observableArray with specific view model type

问题描述

有没有办法将 JSON 数据对象映射到 observable 数组，然后依次将 observable 数组的每一项初始化为特定类型的视图模型?

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?

我在此处查看了所有淘汰赛文档以及淘汰赛和映射示例，但找不到任何适合我所追求的答案.

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.

所以，我有以下 JSON 数据:

So, I have the following JSON data:

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

我有以下视图模型:

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

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

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，但城市"和街道"集合填充了通用对象，而不是我的城市和街景视图模型的实例.

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.

它们最终会得到正确的 observable 属性和值，它们只是不是我所追求的视图模型的实例.

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.

推荐答案

检查这个 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());
​

这篇关于将 JSON 数据映射到具有特定视图模型类型的 Knockout observableArray的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！