Ember Tree

Ember Tree

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
  <nav>
    Example
  </nav>
  <div class="container">
      {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="index">
    {{#each item in model}}
        {{view 'TreeBranch' content=item.children itemViewClass='TreeNode'}}
    {{/each}}
</script>

CSS

nav {
    border-bottom: 1px solid black;
    padding: 1em;
}

.container { 
    padding: 1em;
}

JavaScript

App = Ember.Application.create();

App.Router.map( function() {
    this.resource('index', {path: '/'});
});

App.IndexRoute = Ember.Route.extend({
    model : function(){
        return this.store.find('root');
    },
    
    setupController: function(controller, model) {
        controller.set('model', model);
    },
    actions: {
        loadCat: function() {
          return this.store.find('child');
        }
    }

})

App.TreeBranchView = Ember.CollectionView.extend({
    tagName: 'ul'
});

App.TreeNodeView = Ember.View.extend({
    tagName: 'li',
    
    template  : Ember.Handlebars.compile('<p>Click here: {{view.content.name}}</p>'),
    
    click: function(evt) {
        //var treeBranchView = new App.TreeBranchView.create();
        this.get('controller').send('loadCat');
        /**
          If I click on the 'categories' item how does 
          Ember do a GET to the api at the endpoint
          http://jsonstub.com/roots/categories and set the
          content on the new 'treeBranchView' instance?
        */
    }
});

App.ApplicationAdapter = App.RESTAdapter = DS.RESTAdapter.extend({
    host: 'http://jsonstub.com',
   
    headers: {
        'Content-Type': 'application/json',
        'JsonStub-User-Key': '90938a46-37bb-4977-a3d4-ac98fcf548f5',
        'JsonStub-Project-Key': 'bd97f232-1d31-43d1-9166-5db54c354288'
    }
});

App.Child = DS.Model.extend({
    name: DS.attr('string'),
    path: DS.attr('string'),
    parent: DS.attr('string'),
    role: DS.attr(),
    children: DS.attr()
});

App.Root = DS.Model.extend({
    name: DS.attr('string'),
    path: DS.attr('string'),
    parent: DS.attr('string'),
    role: DS.attr(),
    children: DS.hasMany(App.Child)
});

App.ApplicationSerializer = DS.RESTSerializer.extend({
    normalizePayload: function(payload) {
        // Create ID for paylaod
        var payloadId = payload.path.substring(1).replace(/\//g, '-');
        
        // Create ID for payload.children objects
       ...