events firing before nested components load

[flohdot]

I have an Aura app with a component which initializes nested components. After initializing these, I use this.sandbox.emit to send a message that the children are subscribed to. Unfortunately, the event is emitted before the child components load and it is therefore not received. Is there a way to pass a callback on child initialization?

Here is some sample code:

"parent' component

render: function() {
    var childComponents = "";
    for (var i = 0; i< this.queue.length; i++) {
      childComponents += "<div data-aura-component='"+ this.queue[i].type"' data-aura-container-index='"+ i +"'></div>";
    }
    this.html(childComponents); 
    this.showNext();
  }

loop: function() {
    if(this.index < this.queue.length) {
      setTimeout(this.showNext, this.duration);
      this.index++;
    } 
  },

  showNext: function() {
    this.sandbox.emit('play', this.index);
    this.loop();
  },

'child' component

initialize: function() { 
        this.sandbox.on('play', this.checkPlayStatus, this);
        this.render();
      },

Note: The event in question is being emitted over and over. It works all except the first time. My debugging has shown me that the issue is that the first occurrence of the event is fired before the child components are initialized. If I delay the first call of showNext() by a second, the first event does work.

Thanks!

[flohdot]

Related to #307 and #304, upon further inspection. Maybe the use case is helpful for developing some promise or callback system....