バインド第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

あなたの最初のレベルと第2レベルのコンストラクタは両方とも同じ第二レベルのマッピングオブジェクトを使用しています。私は子供のための第3レベルのマッピング(reservationOptionValuesMapping)を代わりに使用するように2番目のレベルのコンストラクタを変更する必要があると思うし、3番目のレベルのコンストラクタは子マッピングを全く使用すべきではありません。

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