Ember Tree

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.6.js"></script>
<script type="text/x-handlebars">
{{#view UI.TreeView contentBinding="App.nodeRoot"}}
    {{content.name}}
    {{view UI.TreeChildrenView contentBinding="content.children"}}
{{/view}}
</script>

CSS

ul { margin-left: 10px; }

JavaScript

window.App = Ember.Application.create();
get = Ember.get, set = Ember.set;

App.nodeRoot = Ember.A([{ name: "aaa", children: [ { name: "bbb", children: [{ name: 'ccc', children: [ { name: 'ddd' }] }] }, {name: "bbb2"} ]}]);

UI = {};

UI.NodeView = Ember.View.extend({
    tagName: "li",
    //contentBinding: "*content",
    templateContext: Ember.computed(function(key, value) {
        return value !== undefined ? value : get(this, 'content');
    }).cacheable(),
    
    init: function() {
        var treeRootTemplate, rootView;
        
        if(get(this, 'treeRoot')) rootView = get(this, 'parentView');
        else rootView = this.nearestWithProperty('treeRoot');
        
       set(this, 'template', get(rootView, 'template'));

        this._super();
    }
});

        
UI.TreeView = Ember.CollectionView.extend({
    tagName: "ul",
    
    //templatePath: 'template',
    itemViewClass: UI.NodeView.extend({
        treeRoot: true
    })
});

UI.TreeChildrenView = UI.TreeView.extend({
    itemViewClass: UI.NodeView.extend({
    })
});