KnockoutJS mapped Model add to Observable array

Question

Я хочу создать наблюдаемый массив из динамической модели, который в основном представляет собой запись AJAX для получения информации JSON. Затем я хочу добавить этот массив в таблицу.

Вот мой Javascript для создания ViewModel, и что предполагают, чтобы добавить в массив:

var ProductViewmodel; 
    function bindProductModel(Products) { 
     var self = this; 
     self.items = ko.mapping.fromJS([]); 
     ProductViewmodel = ko.mapping.fromJS(Products, self.items); 
     console.log(ProductViewmodel); 
     ko.applyBindings(ProductViewmodel); 
    } 

    function JSONProducts() { 
     $.ajax({ 
      url: "WebForm1.aspx/AvailibleProducts", 
      // Current Page, Method 
      data: '{Warehouse: 1}', 
      // parameter map as JSON 
      type: "POST", 
      // data has to be POSTed 
      contentType: "application/json; charset=utf-8", 
      // posting JSON content  
      dataType: "JSON", 
      // type of data is JSON (must be upper case!) 
      timeout: 10000, 
      // AJAX timeout 
      success: function (result) { 
       bindProductModel(result); 
      }, 
      error: function (xhr, status) { 
       alert(status + " - " + xhr.responseText); 
      } 
     }); 
    } 

Получение в формате JSON работает идеально:

{ 
"d": [ 
    { 
     "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.ProductStagingMethod", 
     "ProductSKUID": 2, 
     "ProductSKUName": "Decoder 1131", 
     "WarehouseID": 1, 
     "WarehouseName": "SoftwareDevelopmentTest", 
     "SystemAreaName": "Staging", 
     "Qty": 5 
    } 
] 

}

и здесь я пытаюсь привязать данные к моей таблице:

<div id="TableContainer" class="gridview"> 
    <table border="1" cellpadding="0" cellspacing="0"> 
    <tbody data-bind="foreach: ProductViewmodel"> 
     <tr> 
     <td data-bind="text: ProductSKUID"></td> 
     <td data-bind="text: ProductSKUName"></td> 
     <td data-bind="text: WarehouseID"></td> 
     <td data-bind="text: WarehouseName"></td> 
     <td data-bind="text: SystemAreaName"></td> 
     <td data-bind="text: QTY"></td> 

     </tr> 
     </tbody> 
    </table> 
</div> 

Похоже, что он не хочет добавлять его в свой массив. Любые советы были бы весьма признательны.

С уважением Жак

Answer 1

У вас есть 3 проблемы с кодом:

1. data-bind="foreach: ProductViewmodel" вы пытаетесь Foreach на всей ProductViewmodel, но нужно, чтобы сделать это на items. Поэтому измените его на <tbody data-bind="foreach: items">
2. Ваши объекты json, завернутые в свойство d, поэтому вам нужно позаботиться об этом в своем сопоставлении. Поэтому вам нужно написать: ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
3. Вы ошиблись в имени свойства Qty. Правильное связывание: <td data-bind="text: Qty"></td> (выражение привязки данных чувствительны к регистру)

Я created a fiddle с кодом, который содержит исправление.

Answer 2

вам нужно использовать ko.mapping.fromJSON вместо ko.mapping.fromJS?