Hope to know Parent/Child template render order

help
1

I have really issue on my app development, and hope to get your expert-level help.

<template name="inspection_go">
  <div class="transitions-content">
    <div class="row toolbar">
      <div class="col s1">
        {{#if previous_group}}
          <a href="{{pathFor 'inspection_go' inspection_id=inspection._id group_id=previous_group._id}}" data-transition-out="slideRightOut" data-transition-in="slideRightIn" class="back-button btn-large btn-floating waves-effect waves-light blue" ><i class="mdi-image-navigate-before"></i></a>
        {{else}}
          <a href="{{pathFor 'inspection_view' _id=inspection._id}}" data-transition-out="slideRightOut" data-transition-in="slideRightIn" class="back-button btn-large btn-floating waves-effect waves-light blue" ><i class="mdi-hardware-keyboard-backspace"></i></a>
        {{/if}}
      </div>
      <div class="col s4">
        {{#if next_group}}
          <a href="{{pathFor 'inspection_go' inspection_id=inspection._id group_id=next_group._id}}" data-transition-out="slideRightOut" data-transition-in="slideRightIn" class="back-button btn-large btn-floating waves-effect waves-light blue" ><i class="mdi-image-navigate-next"></i></a>
        {{else}}
          <a href="{{pathFor 'inspection_view' _id=inspection._id}}" data-transition-out="slideRightOut" data-transition-in="slideRightIn" class="toolbar_button btn waves-effect waves-light green" ><i class="mdi-navigation-check left"></i>Complete Inspection</a>
        {{/if}}
      </div>
    </div>
    <div class="content">
      {{> answer_draw_at_a_location group=current_group building=building inspection_id=inspection._id}}
    </div>
  </div>
</template>


<template name="answer_draw_at_a_location">
  <div class="row" style="margin-top: 20px; height: 100%;">
    <div>
      {{#each questions_in_group}}
        <div style="width: 100%;">{{> question_to_answer question_id}}</div>
      {{/each}}
    </div>
  </div>
</template>
<template name="question_to_answer">
  ...
</template>

The above code shows parent - child template relation.

And this is the onRendered of parent/sub template.

  Template.answer_draw_at_a_location.onRendered(function() {
  	console.log("parent");
  });

  Template.question_to_answer.onRendered(function() {
  	console.log("child");
  });

The problem is below.

When I go to inspection_go page firstly, the answer_draw_at_a_location, that is, parent template’s onRendered function invoked firstly, after then, the question_to_answer, that is, child template’s onRendered function invoked.

And because when I click next_group or previous_group link, it recognize the same template, inspection_go in iron:router, it does not invoke the “answer_draw_at_a_location” onRendered function, so I changed to use #each to invoke it as below.

{{#each current_groups}}
  {{> answer_draw_at_a_location group=this building=../building inspection_id=../inspection._id}}
{{/each}}

But now when I click prevoius_group or next_group tag, it execute onRendered function of child template ( question_to_answer ) firstly and after then execute onRendered function of parent template ( answer_draw_at_a_location ).

So I hope to know why it happens, and at least, is there a way to execute parent template onRendered function firstly and after then execute child template onRendered or vice versa.

Please help me.