title: How to access events and helpers of a child-template in Meteor
body: <p><strong>There is an important edit at the end of this</strong>.</p>
  <h1>My Scenario:</h1>
  <pre><code>&lt;p&gt;This is the parent template&lt;/p&gt;
  {{&gt; childComponent }}
  </code></pre>
  <p>The <code>childComponent</code> consists of different UI-Elements allowing the user to <strong>generate some input</strong>. Think of the <code>childComponent</code> as a number-pad with a return-key <code>&lt;a class=&quot;btn&quot; id=&quot;submitStuff&quot;&gt;Submit&lt;/a&gt;</code> and some checkboxes.</p>
  <p>The component is going to be used in different places in the app and each of the parent templates (using the component) make a different use of the <code>childComponent</code>'s output (the number and the information from the checkboxes). <strong>The output is held as an <code>Object</code> in the Session</strong>.</p>
  <h2>What I need to do</h2>
  <p>When clicking the <code>#submitStuff</code> in the <code>childComponent</code> I want the childComponent's generated <code>Object</code> to be handled by a function in the wrapping parent-template.</p>
  <h2>What I tried to do (and failed)</h2>
  <p>Of course I placed all the common behavior of <code>childComponent</code> in it's own template helpers and events. But because each parent template would make another / different use of the child's data (using the number for different purposes and interpreting the checkboxes in different ways), <strong>I tried to listen to the submit-button in the <code>childComponent</code> from the parent's context</strong>.</p>
  <pre><code>Template.parentTemplate.events({
      // trying to listen to the &quot;#submitStuff&quot;-button INSIDE the child-template
      // FAILS --&gt; event is not visible to the outside of the child-component
      'click #submitStuff': function () {
          // get the information from the component
          // nothing happens
      }
  });
  </code></pre>
  <p>This would be so easy. Just to place the <code>childComponent</code> anywhere and decide from the parent-context what to do with it's generated value. But it fails.</p>
  <h2>Does anybody have a suggestion?</h2>
  <p>I thought about <strong>using the Session</strong>, but I am no fan of using the global space anytime I use the <code>childComponent</code>.</p>
  <p>I thought about <strong>defining a function in the parent</strong> dealing with the submission and access that function from the <code>childComponent</code>. But I did not get it to work / don't know how to do it.</p>
  <p>What do you think?</p>
  <p>Thanks in advance!</p>
  <h1>EDITs</h1>
  <p><strong>#1</strong></p>
  <p>I was hinted to the most straight forward way and simply listen to the event in the parent-template-events. But as I wrote: &quot;I tried to listen to the submit-button in the <code>childComponent</code> from the parent's context.&quot; It failed, the event never triggers anything in there (although it should!). When I listen to it <strong>from INSIDE the <code>childComponent</code> itself</strong>, everything is fine.</p>
  <p>This is my setup:
  <a href="http://meteorpad.com/pad/LWNKpfMCatSMhymhN/Copy%20of%20Parent-ChildTemplate" rel="nofollow noreferrer">http://meteorpad.com/pad/LWNKpfMCatSMhymhN/Copy%20of%20Parent-ChildTemplate</a></p>
  <p>(It works as it should and as it does not in my project).</p>
  <p>Does anybody know what could prevent an event from being caught in the parent template?</p>
  <p><strong>#2</strong></p>
  <p>I just figured out that it has something to do with a <strong>plugin that I use: aldeed:template-extension</strong>. After commenting out the line <code>Template.parentTemplate.replace('someBaseParent');</code>, it works as expected.</p>
  <p>Yet I don't know if I just made a mistake in my way of using the plugin or if there is an issue with it.</p>