绑定第三级映射

Question

Hi I have the following model structure, but unfortunately debugger never enters third level mapping, it all points down to how I am using the constructors in relation to mapping chaining but not sure how to do this properly. Could you please help:

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] );

my data structure looks like this:

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

Your first-level and second-level constructors are both using the same 2nd-level mapping object. I think you need to change your second-level constructor to use the third-level mapping for its children (reservationOptionValuesMapping) instead, and then your third-level constructor shouldn't be using a child mapping at all.

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