title: Knockoutjs: Invoking function of parent component from child component
body: <p><strong>Problem:</strong> 
  I'm trying to build a dashboard of widgets. Each widget will have a delete button on its header. When clicked on this button, corresponding widget have to disappear.</p>
  
  <p><strong>How I designed:</strong>
  I have two knockout components.</p>
  
  <ol>
  <li>my-widget-list: 
  VO will have an observableArray of widget objects.</li>
  <li>my-widget:
  VO will have details to display within the widget.</li>
  </ol>
  
  <p>Note: For simplicity, I'm replacing the widget object with just numbers.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>ko.components.register('my-widget-list', {       
      viewModel : function(params) {
          var self = this;
          self.values = ko.observableArray([10,20,30,40,50]);
  
          self.deleteWidget = function(obj)
          {
              self.values.remove(obj);
          }
      },
      template: {element: 'my-widget-list-template'}
  });
  
  ko.components.register('my-widget', {
      viewModel : function(params) {        
          var self = this;        
          self.value = params.value;                        
      },
      template: {element: 'my-widget-template'}
  });
  
  ko.applyBindings({}); </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
  
  &lt;my-widget-list&gt;&lt;/my-widget-list&gt;
  
  &lt;script id="my-widget-list-template" type="text/html"&gt;
      &lt;div data-bind="foreach:values"&gt;
          &lt;my-widget params="value: $data"&gt;&lt;/my-widget&gt;&lt;br&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script id="my-widget-template" type="text/html"&gt;
      &lt;span data-bind="text: value"&gt;&lt;/span&gt;
      &lt;button data-bind="click: $parent.deleteWidget"&gt;Delete&lt;/button&gt;
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, I want to invoke <code>my-widget-list</code>'s <code>deleteWidget</code> function when the button is clicked. </p>
  
  <p>I have thought about </p>
  
  <ul>
  <li>Passing the parent view model reference into the child</li>
  <li>Passing the parent function in the params attribute of the child component as a callback</li>
  </ul>
  
  <p>But I wish to know from experts what's the best way to achieve this.</p>
  
  <p><a href="http://jsfiddle.net/0cvcv49j/4/" rel="noreferrer">JsFiddle Link</a></p>
  
  <p>Thanks in advance</p>