Recursive render

components.x-recurse.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',
  resetHistory: function() {
    this.set('history', []);
  }.on('init'),
  actions: {
    addChild() {
      let oldModel = this.get('model');
      this.get('history').pushObject(oldModel);
      //let newModel = JSON.parse(JSON.stringify(oldModel));
      let newModel = Ember.copy(oldModel, true);
      newModel.children.push({name: 'new child', children:[]});
      console.log(oldModel, newModel)
      this.set('model', newModel);
    },
    restructureChildren() {
      let oldModel = this.get('model');
      this.get('history').pushObject(oldModel);
      //let newModel = JSON.parse(JSON.stringify(oldModel));
      let newModel = Ember.copy(oldModel, true);
      let secondLastTopLevelChild = newModel.children.slice(-2)[0]
      secondLastTopLevelChild.children.push(newModel.children.pop());
      console.log(oldModel, newModel)
      this.set('model', newModel);
    },
    undo() {
      this.set('model', this.get('history').popObject());
    }
  }
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return {
      name: 'parent',
      children: [
        {
          name: 'child 1',
          children: []
        },
        {
          name: 'child 2',
          children: []
        }
      ]
    };
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{x-recurse model=model}}
<button {{action 'addChild'}}>Add child</button>
<button {{action 'restructureChildren'}}>Restructure children</button>
<button {{action 'undo'}}>Undo</button>
<br>
<br>

templates.components.x-recurse.hbs

{{yield}}
{{model.name}}
<ul>
{{#each model.children as |child|}}
	{{x-recurse model=child tagName='li' parent=this}}
{{/each}}
</ul>

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"
  }
}