Composite View: TreeView

A treeview build w/ Marionette

by ryantomaselli

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="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<script id="node-template" type="text/template">
    <li draggable="true">
        <%= nodeName %>
    </li>
</script>
        
<div id="menu-tree"></div>
<div id="available-items"></div>

CSS

ul {
    list-style: disc;
    padding-left: 10px;
    margin-left: 10px;
}
li {
    cursor: pointer;
    padding: 10px;
    display: inline-block;
    border: 1px solid green;
}

#menu-tree {
    float: left;
}
#available-items {
    float: right;
    border: 1px solid blue;
    min-height: 100px;
    min-width: 100px;
}

JavaScript

treeData = [
  {
    nodeName: "Item 1",
    nodes: [
      {
        nodeName: "Item 2",
        nodes: [
          { nodeName: "Item 3" },
          { nodeName: "Item 4" },
          { nodeName: "Item 5" }
        ]
      },
      {
        nodeName: "Item 6",
        nodes: [
          { nodeName: "Item 7" },
          { 
              nodeName: "Item 8",
              nodes: [
                  { nodeName: "Item 9" },
                  { nodeName: "Item 10" },
                  { nodeName: "Item 11" }
              ]
          },
          { nodeName: "Item 12" }
        ]
      }
    ]
  },
  {
    nodeName: "Item 13",
    nodes: [
      {
        nodeName: "Item 14",
        nodes: [
          { nodeName: "Item 15" },
          { nodeName: "Item 16" },
          { nodeName: "Item 17" }
        ]
      },
      {
        nodeName: "Item 18",
        nodes: [
          { nodeName: "Item 19" },
          { nodeName: "Item 20" },
          { nodeName: "Item 21" }
        ]
      }
    ]
  }

];

availableItemsData = [
    { nodeName: "Item 22" },
    { nodeName: "Item 23" }
];

var draggedItemModel;
// The recursive tree view
var TreeView = Backbone.Marionette.CompositeView.extend({
    template: "#node-template",
    buildChildView: function(child, ChildViewClass, childViewOptions){
      // build the final list of options for the childView class
      var options = _.extend({model: child}, childViewOptions);
      // create the child view instance
      var view = new ChildViewClass(options);
      // return it
      return view;
    },
    tagName: "ul",
    events: {
        'click ul > li': function (e) {
            e.stopPropagation();
            console.log('dragstart', this.model.get('nodeName'));
        },
        'dragstart ul > li': function (e) {
            e.stopPropagation();
            draggedItemModel = this.model;
            e.originalEvent.dataTransfer.setData('text/plain', this.model);
            console.log('dragstart',...