Composite View: TreeView

A treeview build w/ Marionette

by Steven Senkus

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://rawgithub.com/derickbailey/backbone.marionette/master/lib/backbone.marionette.js"></script>
<script src="https://rawgithub.com/derickbailey/backbone.memento/master/backbone.memento.min.js"></script>
<script src="https://rawgithub.com/derickbailey/backbone.modelbinding/master/backbone.modelbinding.min.js"></script>
<script id="window-template" type="text/template">
    <div id="window">
        Window: <%= window.name %>
        <br>
        Other data: <%= window.other %>
        <div id="tabs"></div>
    </div>
</script>

<script id="tab-template" type="text/template">
    <div id="tab">
        <%= tabName %>
    </div>
</script>
    
<div id="tree">
</div>

CSS

body{
    padding-left: 10px;
}
#window{
    border: 1px solid black;
    float: left;
    margin: 10px 10px 0px 0px;
    padding: 10px 10px 10px 10px;
}
#tab{
    border: 1px solid red;
    float: left;
    padding-left: 10px;
    margin: 10px 0px 0px 10px;
}

JavaScript

var TreeView = Backbone.Marionette.CompositeView.extend({
    
    initialize: function(){
        if(this.model.tabs){
            this.template = "#window-template";
        }else{
            this.template = "#tab-template";
        }
        this.collection = this.model.tabs;
    },
    
    appendHtml: function(cv, iv){
        cv.$("#tabs").append(iv.el);
    },
    onRender: function() {
        if(_.isUndefined(this.collection)){
            this.$("#tabs").remove();
        }
    }
});

var TreeRoot = Backbone.Marionette.CollectionView.extend({
    tagName: "div",
    itemView: TreeView
});



// ----------------------------------------------------------------
// Below this line is normal stuff... models, templates, data, etc.
// ----------------------------------------------------------------
treeData = [
      {
        window: {
            name: "window 1",
            other: "other data"
        },
        tabs: [
          { tabName: "tab 1" },
          { tabName: "tab 2" },
          { tabName: "tab 3" }
        ]
      },
      {
        window: {
            name: "window 2",
            other: "other data"
        },
        tabs: [
          { tabName: "tab 1" },
          { tabName: "tab 2" },
          { tabName: "tab 3" }
        ]
      }
];
    

TreeNode = Backbone.Model.extend({
    initialize: function(){
        var tabs = this.get("tabs");
        if (tabs){
            this.tabs = new TreeNodeCollection(tabs);
            this.unset("tabs");
        }
    }        
});

TreeNodeCollection = Backbone.Collection.extend({
    model: TreeNode
});

var tree = new TreeNodeCollection(treeData);
var treeView = new TreeRoot({
    collection: tree
});

treeView.render();
$("#tree").html(treeView.el);