Composite View: TreeView

A treeview build w/ Marionette

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://raw.github.com/derickbailey/backbone.marionette/master/lib/backbone.marionette.js"></script>
<script id="node-template" type="text/template">
    <%= nodeName %>
    <% if (showUl) {%>
        <ul></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",
    itemViewContainer: "ul",
    
    templateHelpers: {
        showUl: _.isUndefined(this.collection) ? false : true
     },

    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;
    },
    
});

// 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", */
    itemView: TreeView
});



// ----------------------------------------------------------------
// 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",
    nodes: [
      {
        nodeName: "2nd level, item 3",
        nodes: [
          { nodeName: "3rd level, item 7" },
          { nodeName: "3rd level, item 8" },
          { nodeName: "3rd level, item 9" }
        ]
      },
      {
        nodeName: "2nd level, item 4",
        nodes: [
  ...