KnockoutJS — наблюдаемый массив наблюдаемых объектов

Я хотел бы отобразить редактируемый список элементов, каждый из которых редактируемый (что-то вроде редактируемой сетки). Я использую KnockoutJS. Я не могу использовать только простой Observable Array, потому что, как указано в документации, «observableArray отслеживает, какие объекты находятся в массиве, а не состояние этих объектов»

. Итак, я создал observableArray наблюдаемых объектов (используя utils.arrayMap ) и привязал их к представлению. Однако проблема в том, что если я редактирую данные на экране, любые изменения ввода данных, которые пользователь делает на экране, не вступают в силу. См. http://jsfiddle.net/AndyThomas/E7xPM/

Что я делаю неправильно?

​

var categoryList= [
{
   Name: "Electronics",
   Id: "1"},
{
   Name: "Groceries",
   Id: "2"}
];

var initialData= [
{
   Name: "Television",
   CategoryId: "1"},
{
   Name: "Melon",
   CategoryId: "2"}
];

var viewModel = {
    products: ko.observableArray(
        ko.utils.arrayMap(initialData, function(product) { 
                                return ko.observable(product); 
        })),
    categories: ko.observableArray(categoryList)       
};


$(function() {
    ko.applyBindings(viewModel);

});

​