Нажатие значений Вложенные ko.observableArray

Question

Я хочу вложить список поставщиков в существующую полезную нагрузку JSON, которую я получаю с сервера, исходя из того, требуется ли в компоненте JSON Payload поставщик.

То, что я хочу, чтобы в конечном итоге это то, что выглядит следующим образом:

{ 
     "ProductName": "Product123", 
     "RequiredComponents": "CAP 10% H/Vol", 
     "StockCode": "142111411", 
     "RequiredQtyByBom": 4, 
     "QtyUnassignedInWarehouse": 0, 
     "QtyAllocatedInWarehouse": 40, 
     "PCBReference": "442C", 
     "QtyOnOrder": 26, 
     "Vendors": [], 
     "RequireVendor": false 
    }, 
    { 
     "ProductName": "Product123", 
     "RequiredComponents": "Screws", 
     "StockCode": "Screws", 
     "RequiredQtyByBom": 1, 
     "QtyUnassignedInWarehouse": 0, 
     "QtyAllocatedInWarehouse": 14, 
     "PCBReference": "Screws", 
     "QtyOnOrder": 26, 
     "Vendors": [ 
         {"VendorID": "3", 
         "VendorName": "ABC Supplier", 
         "VendorMOQ": 50000, 
         "VendorItemPrice": 322}, 
         {"VendorID": "4", 
         "VendorName": "DEF Supplier", 
         "VendorMOQ": 4, 
         "VendorItemPrice": 120} 
        ], 
     "RequireVendor": true 
    }, 
    { 
     "ProductName": "Product123", 
     "RequiredComponents": "14141415", 
     "StockCode": "151555231", 
     "RequiredQtyByBom": 1, 
     "QtyUnassignedInWarehouse": 0, 
     "QtyAllocatedInWarehouse": 170, 
     "PCBReference": "1414", 
     "QtyOnOrder": 26, 
     "Vendors": [], 
     "RequireVendor": false 
    } 

Я думал сделать это с 2 AJAX вызовите раздвинуть значения в массиве наблюдаемых.

AJAX вызов 1: Создание Начального Payload обезжиривающих Продукты

MyDataViewModel.SelectedOrderID.subscribe = ko.computed(function() { 
     $.ajax({ 
      url: "/URLToMethod/GetBomStockByProductID", 
      data: { OrderID: ko.toJS(MyDataViewModel.SelectedOrderID) }, 
      type: "GET", 
      contentType: "application/json; charset=utf-8", 
      dataType: "JSON", 
      timeout: 10000, 
      success: function (Result) { 
       for (var i = 0; i < Result.d.length; i++) { 
        element = Result.d[i]; 
        MyDataViewModel.CheckStock.push({ 
         ProductName: element.ProductName, RequiredComponents: element.RequiredComponents, StockCode: element.StockCode, RequiredQtyByBom: element.RequiredQtyByBom, QtyUnassignedInWarehouse: element.QtyUnassignedInWarehouse, QtyAllocatedInWarehouse: element.QtyAllocatedInWarehouse, PCBReference: element.PCBReference, QtyOnOrder: element.QtyOnOrder, Vendors: ko.observableArray(), RequireVendor: ko.computed(function() { 
          if ((element.RequiredQtyByBom * element.QtyOnOrder) > element.QtyAllocatedInWarehouse) { 
           return true 
          } else { 
           return false 
          } 
         }) 
        } 
        ); 
       } 
      }, 
      error: function (xhr, status) { 
       alert(status + " - " + xhr.responseText); 
      } 
     }); 
    }); 

AJAX вызовы 2: Push-значение в Поставщик ko.observableArray() было создан в первой полезной нагрузке

MyDataViewModel.PurchaseReqHasVendorDetails = ko.computed(function() { 
     var self = MyDataViewModel; 
     for (var i = 0; i < self.CheckStock().length; i++) { 
      if (self.CheckStock()[i].RequirePO()) { 
       $.ajax({ 
        url: "/URLToMethod/GetVendorsByProductName", 
        data: { ProductName: self.CheckStock()[i].ProductName }, 
        type: "GET", 
        contentType: "application/json; charset=utf-8", 
        dataType: "JSON", 
        timeout: 10000, 
        success: function (Result) { 
         for (var i = 0; i < Result.d.length; i++) { 
          element = Result.d[i]; 
          self.CheckStock()[i].Vendors.push({ VendorID: element.VendorID, VendorName: element.VendorName, VendorMOQ: element.VendorMOQ, VendorPrice: element.VendorPrice }); 
         } 
        }, 
        error: function (xhr, status) { 
         alert(status + " - " + xhr.responseText); 
        } 
       }); 
       return true; 
      } else { 
       return false; 
      } 
     } 
    }); 

Но это не работает. Он создает начальную полезную нагрузку, но не получает вторую полезную нагрузку и вставляет ее в наблюдаемый массив, который я создал.

Любые советы будут оценены

Answer 1

Вы можете использовать mapping plugin, чтобы сделать это легко. Предположим, вы извлекаете несколько различных JS с сервера (или изменить его немного после того, как вы получите его), как это:

var data = { 
    [ /* Your example data with products and nested vendors here */ ] 
} 

Создание модели представлений может быть столь же простым, как:

var viewModel = ko.mapping.fromJS(data); 
ko.applyBindings(viewModel); 

Если вам не нужны автогенерированные модели просмотра, но используйте собственные функции конструктора ViewModel, которые вы можете использовать плагин сопоставления для добавления дополнительных «параметров сопоставления». В документации есть отличные примеры.

Вот fiddle with a demo, который включает ваши данные.