Composite View: TreeView

builind a menu structure

by erichbschulz

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.modelbinding/master/backbone.modelbinding.min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.memento/master/backbone.memento.min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.marionette/master/lib/backbone.marionette.js"></script>
<script id="agcMenuTemplate" type="text/template">
            <% if(typeof(type) != "undefined" && type=="url") { %>yes<% } else { %>no <% }%>
            <%= title %>
        <ul></ul>
</script>
        
<div id="menu">
</div>

CSS

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

JavaScript

var menuView = Backbone.Marionette.CompositeView.extend({
    template: "#agcMenuTemplate",
    tagName: "li",
    initialize: function(){
        // grab the child collection from the parent model
        this.collection = this.model.items;
        // this dont work:
        //this.collection = new Backbone.Collection({collection: this.model.items});
    },
    appendHtml: function(cv, iv){
        cv.$("ul:first").append(iv.el);
    }
});

// The root
var MenuRoot = Backbone.Marionette.CollectionView.extend({
    tagName: "ul",
    itemView: menuView
});

var menu = {title: "EMS", tip: "Election Management System", type: "menu", link: "/election",
 items: [
   { title: "Search", tip: "EMS Search", type: "url", link: "/election/search"},
   { title: "Letterboxing", tip: "Letterboxing", type: "url", link: "/election/letterboxing"},
   { title: "Events", tip: "Events", type: "url", link: "/election/events"},
   { title: "Poster Sites", tip: "Poster Sites", type: "url", link: "/election/postersites"},
   { title: "Polling Booths", tip: "Polling Booths", type: "url", link: "/election/pollingbooths"},
   { title: "Mailer", tip: "Mailer", type: "url", link: "/election/mail"},
   { title: "Other Tasks</a>", tip: "Other Tasks</a>", type: "url", link: "/election/tasks"}
   ]
};
menuData = [
  menu,
      { title: "2nd level, item 2", type: "url", link: "google.com",
        items: [
          { title: "3rd level, item 4", type: "url", link: "google.com" },
          { title: "3rd level, item 5", type: "url", link: "google.com",
              items: [
                  { title: "4th level, item 1", type: "url", link: "google.com" },
                  { title: "4th level, item 2", type: "url", link: "google.com" },
                  { title: "4th level, item 3", type: "url", link: "google.com" }
              ]},
          { title: "3rd level, item 6", type: "url", link: "google.com" }
        ]}];


MenuNode = Backbone.Model.extend({
    initialize: function(){
       ...