New Twiddle

components.x-component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.x-delayed.js

import Ember from 'ember';

var cache = Ember.A();
var waitForNext = false;

function scheduleNextComponent(comp) {
  if (comp) {
  	cache.addObject(comp);
  }
  if (!waitForNext) {
    waitForNext = true;
    Ember.run.next(displayNextComponent);
  }
}

function displayNextComponent() {
  Ember.run.schedule('afterRender', function() {
    var comp = cache[0];
    if (comp) {
      cache.removeAt(0);
      comp.set('displayBlock', true);
    }
        
    waitForNext = false;
    if (cache.length > 0) {
    	scheduleNextComponent();
    }
  });
}

export default Ember.Component.extend({
  tagName: '',
  displayBlock: false,
  didInsertElement() {
    scheduleNextComponent(this);
  },
  willDestroyElement() {
    if (!this.get('displayBlock')) {
    	cache.removeObject(this);
    }
  }
});

components.x-row.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.x-td.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  test: Ember.computed('w', 'h',function() {
    var r = [];
    let {w, h} = this.getProperties('w','h');
    for (var x = 0; x < h; ++x) {
      var t = [];
      for (var y = 0; y < w; ++y) {
        t.push(x+'_'+y);
      }
      r.push(t);
    }
    return r;
	}),
  actions: {
    update() {
      this.setProperties({
        w: 30,
        h: 100
      });
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<button {{action 'update'}}>Update</button>
<br>
<br>
{{x-component test=test}}
<br>
<br>

templates.components.x-component.hbs

{{#each test as |t|}}
<div>
	{{x-row t=t}}
</div>
{{/each}}

templates.components.x-delayed.hbs

{{#if displayBlock}}
{{yield}}
{{/if}}

templates.components.x-row.hbs

{{#x-delayed}}
  {{#each t as |v|}}
    {{x-td tagName='span' v=v}}
  {{/each}}
{{/x-delayed}}

templates.components.x-td.hbs

{{v}}
{{#if hasBlock}}
{{yield}}
{{/if}}

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "canary",
    "ember-data": "2.7.0",
    "ember-template-compiler": "canary"
  },
  "addons": {}
}