바인드 제 3 수준 매핑

Question

안녕하세요, 다음 모델 구조를 가지고 있지만 불행히도 디버거가 결코 3 단계 매핑을 입력하지, 모든 점을 아래로 연결 방법에 관계가있는 생성자를 사용하고 있지만이 작업을 올바르게 수행하는 방법을 모르겠다. 당신이 도와주세요 수 :

ReservationViewModel = function (data) { 
    var self = this; 
    ko.mapping.fromJS(data, reservationOptionsMapping, self); 
} 
// 2nd level constructor 
ReservationOptionsViewModel = function (data) { 
    var self = this; 
    ko.mapping.fromJS(data, reservationOptionsMapping, self); 
} 
var reservationOptionsMapping = { 
     'ReservationOptions': { 
      key: function (reservationOption) { 
       return ko.utils.unwrapObservable(reservationOption.Id); 
      }, 
      create: function (options) { 
       return new ReservationOptionsViewModel(options.data, 
      reservationOptionValuesMapping); 
      } 
     } 
    } 
//3nd level constructor 
ReservationOptionsValuesViewModel = function (data) { 
    var self = this; 
    debugger 
    ko.mapping.fromJS(data, reservationOptionValuesMapping, self); 
} 
var reservationOptionValuesMapping = { 
    'ReservationOptionValues': { 
     key: function (reservationOptionValues) { 
      return 
ko.utils.unwrapObservable(reservationOptionValues.Id); 
     }, 
     create: function (options) { 
      return new ReservationOptionsValuesViewModel(options.data); 
     } 
    } 
} 

var formControlsModel = new EditReservationViewModel(@Html.Raw(data)); 
    debugger; 
    ko.cleanNode($('.modal-body')[0]); 
    ko.applyBindings(formControlsModel, $('.modal-body')[0]); 

내 데이터 구조는 다음과 같습니다

var data = 
{"Id":1017, 
"Title":"title1", 
"LogoPath":"logo1", 
"StartDate":"06/11/2017", 
"EndDate":"06/11/2017", 
"StartTime":"00:00", 
"EndTime":"00:10", 
"TimeSpan":1, 
"MinPersons":2, 
"MaxPersons":3, 
"CompanyId":1, 
"ReservationOptions":[{ 
    "Id":1011, 
    "Title":"desc1", 
    "Info":"info1", 
    "TypeId":1, 
    "TypeDescription":"Radio Button", 
    "ReservationOptionValues":[ 
     {"Id":1034,"ValueTitle":"a"}, 
     {"Id":1035,"ValueTitle":"b"}, 
     {"Id":1036,"ValueTitle":"c"}], 
    "NewValues":null}]}; 

Answer 1

귀하의 제 1 레벨 및 제 2 레벨의 생성자는 모두 같은 2 레벨 매핑 개체를 사용하고 있습니다. 두 번째 레벨 생성자를 자식 (reservationOptionValuesMapping) 대신 세 번째 수준의 매핑을 사용하도록 변경해야한다고 생각합니다. 그런 다음 세 번째 수준 생성자가 자식 매핑을 전혀 사용하지 않아야합니다.

// 1st level constructor 
ReservationViewModel = function(data) { 
    var self = this; 
    ko.mapping.fromJS(data, reservationOptionsMapping, self); 
} 
// 2nd level constructor 
ReservationOptionsViewModel = function (data) { 
    var self = this; 
    //ko.mapping.fromJS(data, reservationOptionsMapping, self); 
    ko.mapping.fromJS(data, reservationOptionValuesMapping, self); 
} 
//3nd level constructor 
ReservationOptionsValuesViewModel = function (data) { 
    var self = this; 
    debugger 
    //ko.mapping.fromJS(data, reservationOptionValuesMapping, self); 
    ko.mapping.fromJS(data, null, self); 
}