KnockoutJS Переплет список объектов из вызова AJAX

Question

У меня есть дата-объект в своем коде Javascript описывается следующим образом:

//Data Object that represents products 
    function Product(n, p, t, d) { 
     this.name = ko.observable(n); 
     this.price = ko.observable(p); 
     tags = typeof (t) !== 'undefined' ? t : []; 
     this.tags = ko.observableArray(tags); 
     discount = typeof (d) !== 'undefined' ? d : 0; 
     this.discount = ko.observable(discount); 
     this.formattedDiscount = ko.computed(function() 
     { return (this.discount() * 100) + "%"; } 
           ,this); 
    } 

Тогда у меня есть вызов AJAX для извлечения данных в формате JSON

$(document).ready(function() { 
     $.ajax({ 
      type: "POST", 
      url: "ShoppingCartExampleExample.aspx/SendData", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (msg) { 
       alert(msg.d);    
      } 
     }); 
    }); 

вызов AJAX работает, я получил это как результат:

[ 
{"Discount":0, 
    "Name":"Chocolate", 
    "Price":"7.99" 
    "tags": ["Mars","Snickers"] 
}, 
{"Discount":0.05, 
    "Name":"Beer", 
    "Price":"3.99" 
"tags": ["Large","Extra"] 
} 
] 

Как я мог сопоставить этот список объектов полученное от вызова AJAX к моему объекту Data? Я хотел бы сопоставить этот список с наблюдаемым массивом, а также сопоставить массив меток с наблюдаемым массивом, потому что у меня есть привязка foreach, которая заполняет таблицу HTML для представления продуктов и тегов.

Спасибо

Answer 1

Knockout utility functions теперь включены в последние сборки и являются моим предпочтительным способом обработки вещей. Плагин сопоставления иногда чрезмерно используется и может сделать ваши объекты более раздутыми, чем они должны быть, если они не используются правильно.

Когда массив объектов возвращаются, используйте класс утилиты:

var newProducts = ko.utils.arrayMap(data, function(dataItem) { 
    return new Product(...); 
}); 

ko.utils.arrayPushAll(myViewModel.products, newProducts); 

Довольно прямо вперед и поддерживается. Вы даже можете поместить arrayMap непосредственно в arrayPushAll в качестве второго параметра и пропустить объявление переменной newProducts.

Answer 2

Так предполагая в вашей success функции msg.d ваш массив. Просто проведите цикл по массиву и для каждого вызова пункта new Product для каждого элемента, а затем нажмите результат в наблюдаемый массив любой модели родительского представления. Например, если у вас есть что-то вроде:

var rootViewModel = function() { 
    this.products = ko.observableArray(); 
    //... whatever other properties and functions you have 
} 

var myViewModel = new rootViewModel(); 

Тогда в вашей success функции вашего AJAX вызова, вы могли бы сделать что-то вроде:

success: function (msg) { 
    msg.d.forEach(function(item) { 
     myViewModel.products.push(new Product(item.Name, item.Price, item.tags. item.Discount)); 
    }    
} 

Некоторые из этого водопровода можно избежать, используя mapping плагин, который довольно конфигурируется, чтобы вы могли сопоставить свои простые объекты javascript с вашим вызовом ajax на любую модель просмотра, которую вы хотите.