title: $component incorrect within foreach binding inside a KO component
body: <p>JS Fiddle showing issue: <a href="http://jsfiddle.net/davetropeano/58vm9r6g/7/" rel="nofollow">http://jsfiddle.net/davetropeano/58vm9r6g/7/</a></p>
  
  <p>I have a custom component that renders an observable array. List elements are readonly and I am trying to support letting a user delete an element. </p>
  
  <p>Here's the template:</p>
  
  <pre><code>&lt;template id="kv-list"&gt;
  &lt;input type="text" placeholder="key" data-bind="textInput: k"&gt;
  &lt;input type="text" placeholder="value" data-bind="textInput: v"&gt;
  &lt;button data-bind="click: add"&gt;Add&lt;/button&gt;&lt;br&gt;
  
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th data-bind="text: keyHeading"&gt;&lt;/th&gt;
              &lt;th data-bind="text: valueHeading"&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody  data-bind="foreach: items"&gt;
          &lt;tr&gt;
              &lt;td data-bind="text: k"&gt;&lt;/td&gt;
              &lt;td data-bind="text: v"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;a href="#" data-bind="click: $component.delete"&gt;delete&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>and the ViewModel and registration code:</p>
  
  <pre>
  
      function KV(k, v) {
          self = this;
          self.k = k;
          self.v = v;
      }
  
      function KVPairList(params) {
          this.items = params.items;
          this.keyHeading = params.keyHeading || 'Key';
          this.valueHeading = params.valueHeading || 'Value';
          this.k = ko.observable();
          this.v = ko.observable();   
      }
  
      KVPairList.prototype.add = function () {
          this.items.push(new KV(this.k(), this.v()));
      };
  
  
      KVPairList.prototype.delete = function (item) {
          this.items.remove(item);
      };
  
  
      function VM(params) {
          this.title = params && params.heading ? params.heading : 'KO Component Example';
          this.variants = ko.observableArray();
      }
  
  
      ko.components.register('kvlist', {
          viewModel: KVPairList,
          template: {
              element: 'kv-list'
          }
      });
  
      ko.components.register('page-main', {
          viewModel: VM,
          template: { element: 'wrapper' }
      });
  
      ko.applyBindings();
  
  </pre>
  
  <p>Adding to the observable array works fine. But if you click delete on one of the rows KO throughs an error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'remove' of undefined
  </code></pre>
  
  <p>It looks like what is happening is that $component is not the context of the component's viewmodel -- it is just the item inside the foreach binding. I tried $parent with the same effect.</p>
  
  <p>Is there a way to access the component's viewmodel inside the foreach loop?</p>
  
  <p>(JS Fiddle showing issue: <a href="http://jsfiddle.net/davetropeano/58vm9r6g/7/" rel="nofollow">http://jsfiddle.net/davetropeano/58vm9r6g/7/</a>)</p>