nested-list

components.nested-list.js

import Ember from 'ember';

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

components.nested-list.list-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    expand(item) {
      Ember.RSVP.resolve(this.get('expand')(item)).then((list) => {
				this.set('nestedList', list);
      });
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  init () {
  	this._super(...arguments);
    this.set('nodes', [{
        "id" : 1,
        "parent" : null,
        "name" : "Root1"
      },
      {
        "id" : 2,
        "parent" : null,
        "name" : "Root2"
      },
      {
        "id" : 3,
        "parent" : 2,
        "name" : "Child2-3"
      },
      {
        "id" : 4,
        "parent" : 2,
        "name" : "Child2-4"
      },
      {
        "id" : 5,
        "parent" : 1,
        "name" : "Child1-5"
      },
      {
        "id" : 6,
        "parent" : 1,
        "name" : "Child1-6"
      },
			{
        "id" : 7,
        "parent" : 6,
        "name" : "Child6-7"
      },      {
        "id" : 8,
        "parent" : 6,
        "name" : "Child6-8"
      }]
    );
		let rootNodes = this.get('nodes').filter((node) => {
    	return node.parent ? false : true
    })
    this.set('rootNodes', rootNodes);
  },
  actions : {
    findChildren (parent) {
      return this.get('nodes').filterBy('parent', parent.id);
    }
  }
});

templates.application.hbs

{{#nested-list list=rootNodes expand=(action 'findChildren') as |item expand|}}
  {{item.name}}
  <button onclick={{action expand item}}>Get Children</button>
{{/nested-list}}

templates.components.nested-list.hbs

<ul>
	{{#each list as |item|}}
    {{#nested-list/list-item item=item expand=expand as |item expand|}}
      {{yield item expand}}
    {{/nested-list/list-item}}
	{{/each}}
</ul>

templates.components.nested-list.list-item.hbs

{{yield item (action 'expand' item)}}
{{#if nestedList}}
	{{#nested-list list=nestedList expand=expand as |item expand|}} 
    {{yield item expand}}
  {{/nested-list}}
{{/if}}

twiddle.json

{
  "version": "0.13.0",
  "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.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}