Meteor OnRendered function after child Template

Question

Parent template onRendered function invokes before child template. How to execute parent templates function after child template rendered.

<template name="parent">
 {{#each object}}
  {{> child}}
 {{/each}}
</template>

<template name="child">
 <img src="someurl" data-src="someurl">
</template>

Now I need to execute some document ready function so

Template.parent.onRendered(function() { // doesnt invokes after child template
 $("img").unveil();
 $(window).trigger("lookup");
});

Answer 1

A combination of autorun and afterFlush is probably what you need. Give something like this a try:

Template.parent.onRendered(function() {
  this.autorun(function() {
    // replace the find with whatever is in your helper
    // which returns the children array/cursor
    if (Children.find().count()) {
      // this should run after the child templates have been rerendered
      Tracker.afterFlush(function() {
        $('img').unveil();
        $(window).trigger('lookup');
      });
    }
  });
});

Answer 2

While using Tracker.afterFlush is an option that produces the needed behavior, the best way to do something like this is to just make use of the child template's onRendered function. As soon as the child template is rendered then needed code will execute.

Template.child.onRendered(function() {
  this.$('img').unveil();
  this.$(window).trigger('lookup');
});

This approach is more natural and allows the child template to be used in any other template as well without "breaking"