New Twiddle

components.category-node.js

import Ember from 'ember';

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

components.node-list.js

import Ember from 'ember';

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

components.tree-node.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    setChildren(parentNode) {
    	let children = this.get('getChildNodes')(parentNode);
      this.set('children', children);
    }
  }
});

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) {
      let nodes = this.get('nodes');
      return nodes.filter((node => {
        return node.parent === parent.id
      }))
    }
  }
});

templates.application.hbs

{{#with (component "category-node") as |categoryNodeTemplate|}}
  {{node-list nodes=rootNodes customNodeTemplate=categoryNodeTemplate getChildNodes=(action 'findChildren')}}
{{/with}}

templates.components.category-node.hbs

{{node.name}}
<button {{action setChildren node}}> Get Children </button>

templates.components.node-list.hbs

<ul>
	{{#each nodes as |node|}}
  	{{tree-node node=node getChildNodes=getChildNodes customNodeTemplate=customNodeTemplate}}
	{{/each}}
</ul>

templates.components.tree-node.hbs

{{component customNodeTemplate node=node setChildren=(action 'setChildren')}}
{{#if children}}
	{{node-list nodes=children customNodeTemplate=customNodeTemplate getChildNodes=getChildNodes}}
{{/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"
  }
}