New Twiddle

components.request-component-two.js

import Ember from 'ember';

const LAZY_KEY = 'REQUEST_COMPONENT_TWO_LAZY';

export default Ember.Component.extend({
  isLoading: true,
  lazy: Ember.inject.service(),
  
  init() {
    this._super(...arguments);
    Ember.get(this, 'lazy').register(LAZY_KEY);
    this._requestData()
      .then((result) => Ember.set(this, 'result', result))
      .then(() => Ember.set(this, 'isLoading', false));
  },
  
  _requestData() {
 		return Ember.get(this, 'lazy').push(LAZY_KEY, Math.random());
  }
});

components.request-component.js

import Ember from 'ember';

const LAZY_KEY = 'REQUEST_COMPONENT_LAZY';

export default Ember.Component.extend({
  isLoading: true,
  lazy: Ember.inject.service(),
  
  init() {
    this._super(...arguments);
    Ember.get(this, 'lazy').register(LAZY_KEY);
    this._requestData()
      .then((result) => Ember.set(this, 'result', result))
      .then(() => Ember.set(this, 'isLoading', false));
  },
  
  _requestData() {
 		return Ember.get(this, 'lazy').push(LAZY_KEY, Math.random());
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  more: false,
  
  actions: {
  	more() {
    	Ember.set(this, 'more', true); 
    }
  }
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
  	return Array.apply(null, { length: 10 }).map(() => 1);
  }
});

services.lazy.js

import Ember from 'ember';

export default Ember.Service.extend({
  _registry: {},
  
  register(key) {
  	if (this._hasKey(key) === true) {
    	return Ember.get(this, '_registry')[key];
    }
    return Ember.set(Ember.get(this, '_registry'), key, { objects: [], promises: [] });
  },
  
  push(key, data) {
    if (this._hasKey(key) === false) {
    	throw new Error('uhh what..?');  
    }
    Ember.run.debounce(this, '_flush', key, 150);
    const object = Ember.get(this, '_registry')[key];
    object.objects.addObject(data);
    return new Ember.RSVP.Promise((resolve, reject) => {
     	object.promises.addObject([resolve, reject]);
    });
  },
  
  _hasKey(key) {
  	return Object.keys(Ember.get(this, '_registry')).includes(key); 
  },
  
  _flush(key) {
    if (this._hasKey(key) === false) {
    	throw new Error('uhh what..?');  
    }
    
    console.log(`CALLED - ${key}`);
  	const object = Ember.get(this, '_registry')[key];
    const sum = object.objects.reduce((prev, cur) => prev + cur, 0);
   	object.promises.forEach(([resolve, reject]) => resolve(sum));
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<h1>Component 1 (10 Times)</h1>
{{#each model as |empty|}}
	{{request-component}}
{{/each}}
<button onclick={{action "more"}}>More</button>

{{#if more}}
	<h1>Component 2 (10 Times)</h1>
  {{#each model as |empty|}}
    {{request-component-two}}
  {{/each}}
{{/if}}
<br>
<br>

templates.components.request-component-two.hbs

2nd Result was: {{#if isLoading}} Loading... {{else}} {{result}} {{/if}}

templates.components.request-component.hbs

Result was: {{#if isLoading}} Loading... {{else}} {{result}} {{/if}}

twiddle.json

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