title: KnockoutJS - Observable Array of Observable objects
body: <p>I would like to display an editable list of items, each item of which is editable (kind of like an editable grid, in a way). I am using KnockoutJS. I cannot use just a simple Observable Array because, as the documentation states "An observableArray tracks which objects are in the array, not the state of those objects"</p>
  
  <p>So, I have created an observableArray of observable objects (using utils.arrayMap), and bound them to the view. However, the problem is that if I edit the data on screen, any data-entry changes that the user makes on screen do not appear to take effect. See <a href="http://jsfiddle.net/AndyThomas/E7xPM/" rel="noreferrer">http://jsfiddle.net/AndyThomas/E7xPM/</a></p>
  
  <p>What am I doing wrong?</p>
  
  <pre><code>&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;table&gt;
     &lt;tbody data-bind="template: { name:'productListJavascriptTemplate', foreach: products}"&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  
  
  &lt;script type="text/html" id="productListJavascriptTemplate"&gt;
  &lt;tr&gt;
      &lt;td&gt;Name: &lt;input data-bind="value: Name"/&gt;&lt;/td&gt;
      &lt;td&gt;Name: &lt;span data-bind="text: Name"/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;select data-bind="options: this.viewModel.categories, 
          optionsText: 'Name', optionsValue: 'Id', value: CategoryId,
          optionsCaption: 'Please select...'"&gt;&lt;/select&gt;&lt;/td&gt;
      &lt;td&gt;CategoryId: &lt;input data-bind="value: CategoryId"/&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  
  &lt;/script&gt;​
  
  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);
  
  });
  </code></pre>
  
  <p>​</p>