title: Unable to process binding foreach with cannot read property
body: <p>my entire code works well before I added remove functionality to this demo code.
  Although I am calling this binding with <code>$root</code> but it is giving the same error. 
  I am also attaching the screenshot of the error I get.</p>
  
  <pre><code> //my product class
            function Product(name, price) {
  
                  this.name = ko.observable(name);
                  this.price = ko.observable(price);
  
              };
  
      //my observable array
              this.shoppingCart = ko.observableArray([
  
                  new Product("milk", 10.99),
                  new Product("bread", 7.99),
                  new Product("Jam",1.39)
  
              ]);       
  
  
      //below is my view model
  
              function personViewModel() {
                  var self = this;
  
                  firstName= ko.observable("John");
                  lastName = ko.observable("Smith");
                  checkOut = function () {
                      alert("Trying to Checkout");
                  };
  
                  fullName = ko.computed(function () {
                      return firstName() + " " + lastName();
                  })
  
                  this.addProduct = function () {
  
                      self.shoppingCart.push(new Product("Yogurt", 10.99));
  
                  };
  
                //this method is bind with the button and producing error
                  this.removeProduct = function (product) {
                      self.shoppingCart.remove(product)
                  };
  
              };
              ko.applyBindings(personViewModel);
  
  &lt;!-- language: lang-html --&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"&gt;&lt;/script&gt;
      &lt;body&gt;
          &lt;h1&gt;Hello, Knockout.js&lt;/h1&gt;
          &lt;p&gt;&lt;span data-bind='text: fullName'&gt;&lt;/span&gt;'s Shopping cart&lt;/p&gt;
          &lt;button data-bind="click: checkOut"&gt;Checkout&lt;/button&gt;
          &lt;table&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Product&lt;/th&gt;
                      &lt;th&gt;Price&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody data-bind="foreach: shoppingCart"&gt;
                  &lt;tr&gt;
                      &lt;td data-bind="text: name"&gt;&lt;/td&gt;
                      &lt;td data-bind="text:price"&gt;&lt;/td&gt;
  
                    &lt;!--below binding is breaking the script--&gt;
  
                      &lt;td&gt;&lt;button data-bind="click: $root.removeProduct"&gt;Remove&lt;/button&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;button data-bind="click: addProduct"&gt;Add Item&lt;/button&gt;
      &lt;/body&gt;
  
  &lt;!-- end snippet --&gt;
  </code></pre>