Unmapping view model (ko.mapping.toJSON), the first item exists only - knockout-mapping-plugin

Question

I'm passing the following C# AjaxViewModel model:
namespace Db.ViewModels
{
public class DbAjaxViewModel
{
public DbAjaxViewModel() {
Products = new List<DbProductViewModel>();
}
public List<DbProductViewModel> Products { get; set; }
}
public class DbProductViewModel
{
public string Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public string Price { get; set; }
public string CategoryId { get; set; }
}
}
..with the following code:
[HttpGet]
public ActionResult GetProductsAjax() {
var viewModel = _service.GetAllProductsAjaxViewModel();
return new JsonResult { Data = viewModel, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
Then I do the ko mapping:
function callBack(result) {
sprAdmin.product.viewModel = ko.mapping.fromJS(result);
ko.applyBindings(sprAdmin.product.viewModel, $("adminProductWrap")[0]);
}
$.ajax({
type: "GET",
url: url,
success: callBack
});
and it works great. I have this function to add an empty item to my viewModel:
addProduct: function () {
function product() {
this.Id = ko.observable("-1");
this.CategoryId = ko.observable("0");
this.Name = ko.observable("");
this.Description = ko.observable("");
this.Price = ko.observable("0");
}
debug.debug("adding new product");
sprAdmin.product.viewModel.Products.push(new product());
var debugArray = sprAdmin.product.viewModel.Products(),
debugData = debugArray[debugArray.length - 1];
debug.debug("id: " + debugData.Id() + ", name: " + debugData.Name() + ", description: " + debugData.Description() + ", price: " + debugData.Price() + ", categoryId: " + debugData.CategoryId());
}
as you can see, debug.debug retrieves the last item of Products() array and shows its contents, and this also works great.
But.
When I add more than one item to an empty array and do
var data = ko.mapping.toJSON(viewModel);
debug.debug("ajax submit data: " + data);
it shows the contents of unmapped viewModel converted to JSON like this:
{"Products":[{"Id":"1","CategoryId":"0","Name":"name","Description":"desc","Price":"0"},{}]}
The second (and further if exist) item of Products array is absolutely empty. It works always for the first item only.
Please help.
===
Solution:
First of all it's necessary to declare an observableArray:
viewModel: {
Products: ko.observableArray([])
}
and then to map like this:
sprAdmin.product.viewModel.Products(ko.mapping.fromJS(result.Products)());