Observable array of Observables

This does not work. The grid displays the data correctly, but updating the editable fields has no effect on the bound data.

by AndyThomas

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<table>
    <tbody data-bind="template: { name:'productListJavascriptTemplate', foreach: products}"></tbody>
</table>


<script type="text/html" id="productListJavascriptTemplate">
    <tr>
        <td>Name: <input data-bind="value: Name"/></td>
        <td>Name: <span data-bind="text: Name"/></td>
        <td><select data-bind="options: this.viewModel.categories, 
            optionsText: 'Name', optionsValue: 'Id', value: CategoryId,
            optionsCaption: 'Please select...'"></select></td>
        <td>CategoryId: <input data-bind="value: CategoryId"/></td>

    </tr>

</script>

JavaScript

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);
        
    });