unwrapobservable - Asignar datos JSON a Knockout observable Array con tipo de modelo de vista específico

ko utils unwrapobservable

Question

¿Hay alguna manera de asignar un objeto de datos JSON a una matriz observable y luego, a su vez, hacer que cada elemento de la matriz observable se inicialice en un tipo específico de modelo de vista?

He analizado toda la documentación de knockout junto con los ejemplos de eliminación y mapeo aquí y no puedo encontrar ninguna respuesta que funcione para lo que busco.

Entonces, tengo los siguientes datos JSON:

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

Y tengo los siguientes modelos de vista:

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

¿Es posible, con la estructura de datos dada y el uso del complemento de mapeo de knockout, que el StateViewModel resultante contenga un observableArray poblado con 2 CityViewModels, y cada CityViewModel que contiene un observableArray poblado con 2 StreetViewModels?

Utilizando actualmente el plugin de mapeo, puedo hacer que se asigne a un StateViewModel, pero las colecciones "cities" y "streets" se llenan con objetos genéricos en lugar de instancias de mis modelos de vista de City y Street.

Terminan con las propiedades y valores observables correctos en ellos, simplemente no son instancias de mis modelos de vista, que es lo que estoy buscando.

Answer 1

Mira esto 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());
​