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

Question

I have three views in my application. One ItemView (item) which is a child of CompositeView (category) which is a child of CompositeView (parentCategory).
I also waterfall instantiate my views based on API hits from data (in this case I'm using local data to give the impression of live data).
Here is my application in js form:
var App = new Backbone.Marionette.Application();
App.addRegions({
mainRegion: "#main"
});
var todoArray = [];
// A single row
var TodoRow = Backbone.Marionette.ItemView.extend({
template: "#todo-template",
tagName: "li",
events: {
'click span': 'clickSpan'
},
clickSpan: function() {
console.log(this);
}
});
// The 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 a working JSFiddle here: http://jsfiddle.net/Pq5s7/
There should be three two level li's Roger & Wilko
Then there should be two categories, and one item underneath each category.