Marionette Tree

Marionette Tree

by Nirvanachain

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.min.js"></script>
<script id="node-template" type="text/template">
    <%= nodeName %>
    <ul></ul>
</script>

<script id="root-template" type="text/template">
    <h3>Title</h3>
    <ul class="root">
        
    </ul>
</script>
        
<div id="tree">
</div>

CSS

body{
    padding-left: 10px;
}
ul {
  list-style: disc;
  padding-left: 10px;
  margin-left: 10px;    
}

JavaScript

// The recursive tree view
var TreeView = Backbone.Marionette.CompositeView.extend({
    template: "#node-template",
    
    tagName: "li",
    
    initialize: function(){
        // grab the child collection from the parent model
        // so that we can render the collection as children
        // of this parent node
        this.collection = this.model.nodes;
    },
    
    appendHtml: function(cv, iv){
        cv.$("ul:first").append(iv.el);
    },
    onRender: function() {
        if(_.isUndefined(this.collection)){
            this.$("ul:first").remove();
        }
    },
    childViewContainer: 'ul'
});

// The tree's root: a simple collection view that renders 
// a recursive tree structure for each item in the collection
//var TreeRoot = Backbone.Marionette.CollectionView.extend({
//    tagName: "ul",
//    childView: TreeView
//});
var TreeRoot = Backbone.Marionette.CompositeView.extend({
    tagName: 'div',
    template: '#root-template',
    childView: TreeView,
    childViewContainer: '.root'
});

// ----------------------------------------------------------------
// Below this line is normal stuff... models, templates, data, etc.
// ----------------------------------------------------------------
treeData = [
  {
    nodeName: "top level 1",
    nodes: [
      {
        nodeName: "2nd level, item 1",
        nodes: [
          { nodeName: "3rd level, item 1" },
          { nodeName: "3rd level, item 2" },
          { nodeName: "3rd level, item 3" }
        ]
      },
      {
        nodeName: "2nd level, item 2",
        nodes: [
          { nodeName: "3rd level, item 4" },
          { 
              nodeName: "3rd level, item 5",
              nodes: [
                  { nodeName: "4th level, item 1" },
                  { nodeName: "4th level, item 2" },
                  { nodeName: "4th level, item 3" }
              ]
          },
          { nodeName: "3rd level, item 6" }
        ]
      }
    ]
  },
  {
    nodeName: "top level 2",
   ...