특정 뷰 모델 유형을 사용하여 JSON 데이터를 Knockout 관찰 가능 배열에 매핑

특정 뷰 모델 유형을 사용하여 JSON 데이터를 Knockout 관찰 가능 배열에 매핑

JSON 데이터 개체를 관측 가능한 어레이에 매핑한 다음 관측 가능한 어레이의 각 항목을 특정 유형의 뷰 모델로 초기화하는 방법이 있습니까?

녹아웃과 맵의 예시와 함께 녹아웃의 모든 문서를 살펴봤지만 내가 원하는 것에 맞는 답을 찾을 수 없었다.

JSON 데이터는 다음과 같습니다.

    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로 채워진 관찰 가능한 어레이와 2개의 StreetViewModel로 채워진 관찰 가능한 어레이를 각각 포함하는 것이 가능합니까?

현재 매핑 플러그인을 사용하여 StateViewModel에 매핑할 수 있지만 'cities' 컬렉션과 'streets' 컬렉션에는 시티 뷰 모델과 스트리트 뷰 모델의 인스턴스가 아닌 일반 객체가 포함되어 있습니다.

그것들은 올바른 관찰 가능한 특성과 가치를 갖게 됩니다. 단지 제 뷰 모델의 인스턴스가 아닙니다. 제가 찾고 있는 것은 바로 이것입니다.

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

언급URL : https://stackoverflow.com/questions/9951521/map-json-data-to-knockout-observablearray-with-specific-view-model-type