从嵌套的foreach knockout

Question

我需要帮助在多个层中创建正确的连接。 我有3层数据：

1. 营销列表
2. 每个选定营销列表的字段映射字段
3. 字段名称将作为下拉菜单连接到字段映射字段（第2点）。

目前所有DropDowns都已连接。我如何分开它们。 这是我的代码：

＆＃13;
＆＃13;
  var MarketingList = function(id, name) {
      this.id = id;
      this.Name = name;
      this.Selected = ko.observable(false);
  };

  var fieldMapListDropDown = function(id, name) {
      this.CRMID = id;
      this.CRMName = name;
      this.CRMSelected = ko.observable();
  };

  var sendFieldsForMapping = function(SendID, SendFieldName) {
      this.SendID = SendID;
      this.SendFieldName = SendFieldName;
      this.CRMID = ko.observable();
  };
  
// this is our ko view model
  var createCustomer = function() {
      var self = this;

      self.MarketingList = ko.observableArray([
          new MarketingList("cbML1", "Summer Events Invitees"),
          new MarketingList("cbML2", "Monthly Newsletter"),
          new MarketingList("cbML3", "Interests - Concep Send")
      ]);

      self.sendFieldsForMapping = ko.observableArray([
          new sendFieldsForMapping(1, "First Name"),
          new sendFieldsForMapping(2, "Last Name"),
          new sendFieldsForMapping(3, "Email"),
          new sendFieldsForMapping(4, "Contact Fullname")
      ]);

      self.fieldMapListDropDown = ko.observableArray([
          new fieldMapListDropDown(111111, "First Name"),
          new fieldMapListDropDown(222222, "Last Name"),
          new fieldMapListDropDown(333333, "Email"),
          new fieldMapListDropDown(444444, "Fullname"),
      ]);

  };

  var viewModel = new createCustomer();
  // ko.options.useOnlyNativeEvents = true;
  ko.applyBindings(viewModel, $("#IA-Main-Container")[0]);
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<section id="IA-Main-Container">
    <section data-bind="foreach: mapSelectedMarketingLists" class="table-mapping-marketing-list-fields">
        <table>
             <thead>
                  <tr class='marketing-list-table-title'>
                      <th colspan="2" data-bind="text: Name"></th>
                  </tr>
                  <tr style="text-align: left;">
                       <th style="width:50%">Field in Your List</th>
                       <th style="width:50%">Store As</th>
                  </tr>
              </thead>
              <tbody data-bind="foreach: $parent.sendFieldsForMapping">
                  <tr>
                        <td data-bind="text: SendFieldName"></td>
                        <td>
                            <div class="col-md-8">
                                <select id="CustomerType" name="CustomerType3" class="col-md-6 form-control" data-bind="value: CRMID, options: $root.fieldMapListDropDown, optionsText: 'CRMName', optionsValue: 'CRMID', optionsCaption: 'Select...'"></select>
                            </div>
                        </td>
                    </tr>
              </tbody>
         </table>
    </section>
</section>
＆＃13;
＆＃13;
＆＃13;