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 tuando

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: ko.observable("1")},
{
    Name: "Melon",
    CategoryId: ko.observable("2")}
];

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


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

});