backbone.js - Nested CompositeViews with different sources instantiate multiple parent views instead of child -

i have 3 views in application. 1 itemview (item) child of compositeview (category) child of compositeview (parentcategory).

i waterfall instantiate views based on api hits data (in case i'm using local data give impression of live data).

here application in js form:

var app = new backbone.marionette.application();  app.addregions({     mainregion: "#main" });  var todoarray = [];  // single row var todorow = backbone.marionette.itemview.extend({     template: "#todo-template",     tagname: "li",      events: {         'click span': 'clickspan'     },     clickspan: function() {         console.log(this);     } });  // grid view var categoryview = backbone.marionette.compositeview.extend({     tagname: "li",     template: "#category-template",     itemview: todorow,     itemviewoptions: function(model, index) {         return {             parent: model.get('parent')         }     },      appendhtml: function(collectionview, itemview){         if(collectionview.id === itemview.model.get('parent')) {             itemview.render();              collectionview.$("ul.items").append(itemview.el);         }     } });  var tabview = backbone.marionette.compositeview.extend({     tagname: "li",     template: "#tab-template",     itemview: categoryview,      itemviewoptions: function(model, index) {         return {             parent: model.get('parent')         }     },      appendhtml: function(collectionview, itemview){         if(collectionview.id === itemview.model.get('parent')) {             itemview.render();              collectionview.$("ul.categories").append(itemview.el);         }     } });  var tab = backbone.model.extend({}),     category = backbone.model.extend({}),     todo = backbone.model.extend({});  var tabcollection = backbone.collection.extend({     model: tab,     url: 'tab.json' });  var categorycollection = backbone.collection.extend({     model: category,     url: 'category.json' });  var todocollection = backbone.collection.extend({     model: todo,     url: 'todo.json' });  var todolist,     todofetch,     categorylist,     categoryfetch,     tablist,     tabfetch;  app.addinitializer(function() {      console.log(data);      todolist = new todocollection(data.items);     todofetch = todolist.fetch();     categorylist = new categorycollection(data.categories);      tablist = new tabcollection(data.tabs);       var todocallback = function() {             //categoryfetch = categorylist.fetch();             //categoryfetch.done(categorycallback);             categorycallback();         },         categorycallback = function() {              //tabfetch = tablist.fetch();             //tabfetch.done(tabcallback);              tabcallback();         },         tabcallback = function() {              tablist.each(function(tab, index) {                  var samplecatlist = _.filter(categorylist.models, function(category) {                     if(tab.get('id') === category.get('parent')) return true;                     return false;                 });                  tabview = new tabview({                     collection: new tabcollection(samplecatlist),                     id: tab.get('id'),                     model: tab                 });                   tabview.render();                  $('#main ul').append(tabview.el);             });         };      //todofetch.done(todocallback);     todocallback(); });  app.start(); 

i have working jsfiddle here: http://jsfiddle.net/pq5s7/

there should 3 2 level li's roger & wilko

then there should 2 categories, , 1 item underneath each category.