title: KnockoutJS ko.computed() not updating after inserting an item into an array
body: <p>I have the following objects:</p>
  
  <pre><code>function Category (id, name, weight) {
      this.categoryId = ko.protectedComputed(id);
      this.name  = ko.protectedComputed(name); 
      this.weight = ko.protectedComputed(weight);
      // this.dirtyFlag = new ko.dirtyFlag(this);
  }
  
  function Item (id, name, categoryId, gradeMax) {
      this.itemId = ko.observable(id);
      this.name  = ko.observable(name); 
      this.categoryId = ko.observable(categoryId);
      this.gradeMax = ko.observable(gradeMax);
  }
  
  function Grade (gradeId, itemId, studentId, studentName, grade) {
      this.gradeId = gradeId;
      this.itemId =  itemId;
      this.studentId  =  studentId; 
      this.studentName = studentName;
      this.grade = ko.observable(grade);
  }
  
  var viewModel =  function () {
      var self = this;
  
      self.items = ko.observableArray([
          new Item(3, "Homework 3", 1, 10),
          new Item(1, "Homework 1", 1, 20),
          new Item(2, "Homework 2", 1, 30),
          new Item(4, "Quiz", 3, 5)
      ]);
  
      self.categories = ko.observableArray([ 
          new Category(1, "Homework", 50) , 
          new Category(2, "Test", 25), 
          new Category(3, "Quiz", 25)          
      ]);
  
      self.grades = ko.observableArray([  
          //grades for item 4
          new Grade(10, 4,1, "Olivo,  Omar", 2)  ,   
          new Grade(11, 4,2, "Mercado,  Coryann",5),           
          new Grade(12, 4,3, "Pena,  Juan", 4) 
      ]);
  
      self.addItem = function () {
          var randId = int.rand(); 
          var newItem = new Item(randId , "new item", 1, 100);
          self.items.push(newItem);
  
          self.selectedItem(newItem);           
      };
  
      self.getStudentAverage = function (studentId) {
          return ko.computed(function () 
          {
              var total = 0,
              numOfItems = 0;
  
              // Get the grades for the assignment for this student
              var studentGrades =   ko.utils.arrayFilter(self.grades(), function(grade) {                          
                  return grade.studentId == studentId;
              }); 
  
              // Calculate the Weighted Average
              if ( self.isWeighted() == true ){
                  var faceAverage= 100;
  
                  return tempAvg ;
              }  
          }, this)();
      };
  };
  </code></pre>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;tbody data-bind="foreach: { data : $root.students, as : 'student' }  "  &gt;                  
     &lt;tr&gt; 
          &lt;td&gt;
                  &lt;span data-bind="text: student.studentId" &gt;&lt;/span&gt;   - 
                  &lt;span data-bind="text: student.studentName" &gt;&lt;/span&gt;  
          &lt;/td&gt;
  
          &lt;td&gt; 
               &lt;span data-bind="text:  $root.getStudentAverage(student.studentId) "&gt; &lt;/span&gt; 
          &lt;/td&gt;
  
          &lt;!-- ko foreach: { data : $root.items, as : 'item' }  --&gt;             
          &lt;td &gt; &lt;!--   &lt;span data-bind="css: { dirty : $root.getGrade(item.itemId(), student.studentId).grade.isDirty()}"&gt;&lt;/span&gt; --&gt;
                &lt;input  class="grade-input" data-bind="value: $root.getGrade(item.itemId(), student.studentId).grade " /&gt;  
          &lt;/td&gt;          
          &lt;!-- /ko --&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>The problem is that <code>vm.getStudentAverage()</code> is not updating when I insert a new item.
  I'm trying to figure out why this is not working for me. I would like to compute the average for each student after inserting a new item. </p>
  
  <p>Here's a <a href="http://jsfiddle.net/pisqko/s5uGb/" rel="nofollow">fiddle</a> demonstrating the problem.</p>