Ember: TreeBranchView

Ember: TreeBranchView

by Nirvanachain

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.2/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.4/ember.min.js"></script>
<script type="text/x-handlebars">
{{view App.TreeBranchView}}
{{outlet}}
</script>

<!--
http://dev.mygrid.org.uk/blog/2013/06/ember-js-dynamic-tree-view/
-->

CSS

.tree-branch-icon {
    list-style-type: none;
    padding: 0px 0px 0px 20px;
    margin: 0px;
    background-image: url(http://s21.postimg.org/fl4jyueoz/folder.png);
    background-repeat: no-repeat;
}
.tree-branch-open {
    list-style-type: none;
    padding: 0px 0px 0px 20px;
    margin: 0px;
    background-image: url(http://s18.postimg.org/ivieen9ut/folder_go.png);
    background-repeat: no-repeat;
}
.tree-node-icon {
    list-style-type: none;
    padding: 0px 0px 0px 20px;
    margin: 0px;
    background-image: url(http://s24.postimg.org/viifz2vht/table.png);
    background-repeat: no-repeat;
}

JavaScript

App = Ember.Application.create({})

App.TreeNodeView = Ember.View.extend({
    opened: false,
    branch: function(){
	        return this.get('content').branch;
	    }.property(),
    subBranch: undefined,
    fetchedData: false,
    tagName: 'li',
    // class names that determine what icons are used beside the node
    classNameBindings: ['opened: tree-branch-open', 'branch:tree-branch-icon:tree-node-icon'],
    //templateName: 'treenode',
    // Ember had some issues with finding the treenode template when the branch view is dynamically added to
    // the parent collection view in the click event. Had to compile the template here instead
    template: Ember.Handlebars.compile('{{view.content.name}} {{view.content.age}}'),
    click: function (evt) {
        if (this.get('opened')) {
            // user wants to close the branch
            var index = this.get('parentView').indexOf(this) + 1;
            this.get('parentView').removeAt(index);
            this.set('opened', false);
        } else if (this.get('fetchedData')) {
            // user wants to open the branch and we have already created the view before
            var index = this.get('parentView').indexOf(this) + 1;
            this.get('parentView').insertAt(index, this.get('subBranch'));
            this.set('opened', true);
        } else if (this.get('branch')) {
            // user wants to open the branch for the first time
            var name, age;
            var me = this;
            name = this.get('content').name;
            age = this.get('content').age;
            var treeBranchView = App.TreeBranchView.create();
            treeBranchView.set('content', [{
                'name': 'John',
                'age': 10,
                'branch': true
            }, {
                'name': 'Tom',
                'age': 5,
                'branch': false
            }, {
                'name': 'Paul',
                'age': 7,
                'branch': true
            }]);
        ...