Javascript Backbone.js和嵌套集合

这是另一个问题的详细问题（带有一些mmy代码）：

另一个问题包含我试图实现的图形表示，但我认为如果我编写一些代码，将有助于解决我的问题

我有以下结构的大数组或数据：

[
    {
        window: { <window-relative data>},
        tabs: [
            { <tab-relative data>},
            { <tab-relative data>}
        ]
    },

    {
        window: { <window-relative data>},
        tabs: [
            { <tab-relative data>},
            { <tab-relative data>}
        ]
    }
]

和一个看起来几乎一样的标签集合。我还有一个窗口模型和一个选项卡模型

当页面完全加载时，将运行以下代码将数据加载到窗口集合中：

myapp.myWindowCollection.reset（）

我的问题是：在哪里以及如何初始化选项卡集合？在“onReset”中？
让我们假设我做了类似的事情

onReset: function(){
    _.each(this.models, function(window_data){
        t = new TabsCollection();
        t.reset(window_data.tabs);
    });
}

然后，我的嵌套集合（选项卡集合）将具有正确的数据，但是如何创建每个选项卡集合的视图呢

我可以做到：

onReset: function(){
    _.each(this.models, function(window_data){
        t = new TabsCollection();
        t.reset(window_data.tabs);
        tv = new TabsCollectionView(
            collection: t;
        );
    });
}

但我会把视图和集合搞得一团糟，我觉得这真的很混乱。
有没有更好的方法不需要在同一个地方处理视图和集合呢？
我只是在这里发布这篇文章，让其他人看看我是如何解决这个问题的

此解决方案的工作演示可在以下位置找到：

从链接中可以看到，这项工作的完成得益于Marionette的CompositeView，它允许递归地渲染集合

var TreeView = Backbone.Marionette.CompositeView.extend({

    initialize: function(){
        if(this.model.tabs){
            this.template = "#window-template";
        }else{
            this.template = "#tab-template";
        }
        this.collection = this.model.tabs;
    },

    appendHtml: function(cv, iv){
        cv.$("#tabs").append(iv.el);
    },
    onRender: function() {
        if(_.isUndefined(this.collection)){
            this.$("#tabs").remove();
        }
    }
});

我在初始化中使用的小技巧（带有模板asignation的if/else）的工作方式如下：

我获取当前模型并检查它是否有“tabs”键。如果有，则表示当前模型是窗口数据模型，因此我需要使用
窗口模板
，否则使用
选项卡模板

其余的都是非常简单的主干结构。
我只是在这里发布这个，以便其他人可以看到我是如何解决这个问题的

此解决方案的工作演示可在以下位置找到：

从链接中可以看到，这项工作的完成得益于Marionette的CompositeView，它允许递归地渲染集合

var TreeView = Backbone.Marionette.CompositeView.extend({

    initialize: function(){
        if(this.model.tabs){
            this.template = "#window-template";
        }else{
            this.template = "#tab-template";
        }
        this.collection = this.model.tabs;
    },

    appendHtml: function(cv, iv){
        cv.$("#tabs").append(iv.el);
    },
    onRender: function() {
        if(_.isUndefined(this.collection)){
            this.$("#tabs").remove();
        }
    }
});

我在初始化中使用的小技巧（带有模板asignation的if/else）的工作方式如下：

我获取当前模型并检查它是否有“tabs”键。如果有，则表示当前模型是窗口数据模型，因此我需要使用
窗口模板
，否则使用
选项卡模板

其余的都是非常简单的主干结构。
我认为将木偶添加到您的项目中确实可以获得很多好处，木偶的一个好处是，您可以只添加所需的部分，在这种情况下，我认为collectionView和ItemView肯定会帮到您。@Rayweb\u我应该尝试木偶。你知道我在哪里可以得到一个我想要的例子（或类似的东西）？collectionview知道如何呈现它的ItemView，所以一旦你将模型集合传递给collectionview，它将为你呈现它们，而你不需要做很多代码。请查看github上有关木偶的文档，然后尝试本教程。@Rayweb\u问题是我试图在一个集合中包含几个集合。（与此相同，每个WindowView都是选项卡的集合，而我的整个ApplicationView都是WindowView的集合）我认为将木偶添加到项目中确实可以获得很多好处，木偶的一个优点是，您可以只添加所需的部分，在这种情况下，我认为collectionView和ItemView肯定会对您有所帮助。@Rayweb\u我应该试试木偶。你知道我在哪里可以得到一个我想要的例子（或类似的东西）？collectionview知道如何呈现它的ItemView，所以一旦你将模型集合传递给collectionview，它将为你呈现它们，而你不需要做很多代码。请查看github上有关木偶的文档，然后尝试本教程。@Rayweb\u问题是我试图在一个集合中包含几个集合。（与相同，每个WindowView都是选项卡的集合，而我的整个ApplicationView都是WindowView的集合）