具有不同源的嵌套CompositeView实例化多个父视图而不是子视图

Question

我的申请中有三个观点。一个ItemView（item），它是CompositeView（类别）的子节点，它是CompositeView（parentCategory）的子节点。

我还根据数据中的API命中来实例化我的观点（在这种情况下，我使用本地数据来给出实时数据的印象）。

以下是js形式的应用程序：

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();

我在这里有一个工作的JSFiddle：http://jsfiddle.net/Pq5s7/

应该有三个两级的罗杰＆amp; Wilko

然后应该有两个类别，每个类别下面有一个项目。