title: ko.Computed() is not updating with observableArray
body: <p>I have the following code:</p>
  
  <pre><code>// First we define our gift class, which has 2 properties:
  // a Title and a Price.
  // We use knockout js validation to ensure that the values input are suitable/ 
  function Gift(item)
  {
      var self = this;
      self.Title = ko.observable(item.Title);
  
      // attach some validation to the Title property courtesy of knockout js validation
      self.Title.extend({
          required: true,
          minLength: 3,
          pattern: {
              message: 'At least ',
              params: '^[a-zA-Z]+\s?[a-zA-Z]*'
          }
      });
      self.Price = ko.observable(item.Price);
      self.Price.extend({required:true,number:true,min:0.1,max:1000});
  };
  
  
  var viewModelForTemplated =
  {
      gifts: ko.observableArray(),        // gifts will be an array of Gift classes
  
      addGift: function ()
      {
          this.gifts.push(new Gift({ Title: "", Price: "" }));
      },
      removeGift: function (gift)
      {
          this.gifts.remove(gift);
      },
  
      totalCost: ko.computed(function () {
          if (typeof gifts == 'undefined')
              return 0;
  
          var total = 0;
  
          for (var i = 0; i &lt; gifts().length; i++)
          {
              total += parseFloat(gifts()[i].Price());
          };
          return total;
      })
  }
  
  
  $(document).ready(function ()
  {
      // load in the data from our MVC controller 
      $.getJSON("gift/getdata", function (allGifts)
      {
          var mappedgifts = $.map(allGifts, function (gift)
          {
              return new Gift(gift);
          });
  
          viewModelForTemplated.gifts(mappedgifts);
      });
  
      ko.applyBindings(viewModelForTemplated, $('#templated')[0]);
  }
  </code></pre>
  
  <p>and then (above the script) </p>
  
  <pre><code>&lt;div id="templated"&gt;
  
  &lt;table &gt;
      &lt;tbody data-bind="template: { name: 'giftRowTemplate', foreach: gifts }"&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script type="text/html" id="giftRowTemplate"&gt;
      &lt;tr&gt;
          &lt;td&gt;Gift name: &lt;input data-bind="value: Title"/&gt;&lt;/td&gt;
          &lt;td&gt;Price: \$ &lt;input data-bind="value: Price"/&gt;&lt;/td&gt;           
          &lt;td&gt;&lt;a href="#" data-bind="click: function() { viewModelForTemplated.removeGift($data) }"&gt;Delete&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/script&gt;
  
  &lt;p&gt;Total Cost &lt;span data-bind="text: totalCost"&gt;&lt;/span&gt; &lt;/p&gt;    
  
  &lt;button data-bind="click: addGift"&gt;Add Gift&lt;/button&gt; 
  
  &lt;button data-bind="click: save"&gt;Save&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The totalCost method only runs once, when the gifts array is empty, and I can push or remove items onto the observableArray() no problem but nothing fires .</p>
  
  <p>How do I get the span referring to totalCost to update? I bet it's something simple :)</p>
  
  <p>Thanks for your help.</p>