title: Knockout Nested Computed Property binds on page load but fails after Parent Computed Property update
body: <p>I am trying to create a menu where when you click on a button representing one of several groups, an image appears, showing the most popular product. I know this could be done simpler, but I am trying to work with an existing data model.</p>
  
  <p>I am trying to bind an img element to a property (<strong>ProductImageUrl</strong>), which is a property of a nested ko.computed object(<strong>MostPopularProduct</strong>), which is a property of a parent ko.computed object (<strong>SelectedGroup</strong>).</p>
  
  <pre><code>viewModel.SelectedGroup().MostPopularProduct().ProductImageUrl
  </code></pre>
  
  <p>When the page loads, everything works as expected, data binding to the image works. However, when I click on the Group2 button, I get the following data binding error:</p>
  
  <pre><code>Uncaught TypeError: Unable to parse bindings.
  Bindings value: attr:{src: SelectedGroup().MostPopularProduct().ProductImageUrl}
  Message: undefined is not a function VM133:3
  </code></pre>
  
  <p>The nested ko.computed Property MostPopularProduct() has a value and binds properly on page load, but after button click, after the parent Computed Property has updated, the nested ko.computed Property MostPopularProduct() is undefined. </p>
  
  <p>I suspect the issue has to do with data binding of a viewModel property that is a property of a nested ko.computed property.</p>
  
  <p>Here is the jsfiddle:
  <a href="http://jsfiddle.net/boaldave/n5KQr/9/" rel="nofollow">http://jsfiddle.net/boaldave/n5KQr/9/</a></p>
  
  <pre><code>&lt;div id="GroupSelector"&gt;
      &lt;img data-bind="attr:{src: SelectedGroup().MostPopularProduct().ProductImageUrl}"&gt;
  
      &lt;ul id="Menu" data-bind="foreach:Groups"&gt;
          &lt;li&gt;
              &lt;button data-bind="click: $parent.HandleButtonClick"&gt;
                  &lt;span data-bind="text: $data.GroupName"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
  viewModel = {
      Groups: 
      [
          {
              GroupName:"Group1",
              MostPopularProductID: "Product1"
          },
          {
              GroupName:"Group2",
              MostPopularProductID: "Product2"
          }
      ],
      Products:
      [
          {
              ProductID: "Product1",
              ProductImageUrl: "http://placehold.it/100x100"
          },
          {
              ProductID: "Product2",
              ProductImageUrl: "http://placehold.it/200x200"
          }
      ]
  };
  
  // Since the data model above comes from a database, I extend the 
  // viewModel properties with ko.observable and ko.computed properties:
  
  viewModel.SelectedGroupName = ko.observable("Group1");
  
  viewModel.SelectedGroup = ko.computed(function() {
      return ko.utils.arrayFirst(viewModel.Groups, function(item) {
          return item.GroupName === viewModel.SelectedGroupName();
          });
      }, viewModel);
  
  viewModel.SelectedGroup().MostPopularProduct = ko.computed(function ()  {
      return ko.utils.arrayFirst(viewModel.Products, function (item) {
          return item.ProductID === viewModel.SelectedGroup().MostPopularProductID;
          });
      }, viewModel);
  
  viewModel.HandleButtonClick = function(s, e) {
      viewModel.SelectedGroupName(s.GroupName);
  };
  
  var groupSelectorDiv = document.getElementById('GroupSelector');
  if (groupSelectorDiv) {
      ko.applyBindings(viewModel, groupSelectorDiv);
  }
  
  &lt;/script&gt;
  </code></pre>