JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<ul id="tree-structure" class="here"></ul>

CSS

.here {
    padding: 50px;
    border: 1px solid black;
}

JavaScript

//Model
var TreeItem = Backbone.Model.extend({});

//Collection
var TreeList = Backbone.Collection.extend({model: TreeItem,url: "/get_tree_list"});

//Model View
window.TreeItemView = Backbone.View.extend({
  tagName: 'li',
  initialize: function(){
    _.bindAll(this, 'render');
  },
  render: function(){
    $(this.el).html('<span>'+this.model.get('title')+'</span>');
    return this;
  }
});

//Collection View
window.TreeListView = Backbone.View.extend({
  el: "#tree-structure",
  events: {

  },
  initialize: function() {
    _.bindAll(this, 'renderTreeItem', 'render');
      this.collection.bind('add', this.renderTreeItem);
      //Don't render here
  },
  render: function() {
    this.collection.each(this.renderTreeItem);
    return this;
  },
  renderTreeItem: function(item){
    var tree_item_view = new TreeItemView({model: item});
    $(this.el).append(tree_item_view.render().el);

  }
});

//Instance
window.tree_list = new TreeList();

//Simulate fetch using reset
tree_list.reset([{title:"A"},{title:"B"},{title:"C"}]);
var tree_list_view = new TreeListView({collection:tree_list});
tree_list_view.render();