javascript - Backbone.js 和嵌套集合

Question

这是另一个问题的详细问题(带有一些mmy代码):Backbone nested views

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

我有一个具有以下结构的大数组或数据:

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

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

我不能只查询窗口的选项卡，也不能只查询单个窗口。数据是原样的，不可能以任何方式分割它。我们就让数据处于引导状态(并且引导方式无法更改)。

继续这个问题:我有一个 WindowsCollection:

myapp.WindowCollection = Backbone.Collection.extend({
    model : WindowModel,

    initialize: function(){
        this.bind('reset', this.onReset);
    },

    onReset: function(){
        // ...
    }

});

还有一个看起来几乎相同的选项卡集合。我还有一个 Window 模型和一个 Tab 模型。

当页面完全加载时，运行以下代码将数据加载到窗口集合中:myapp.myWindowCollection.reset(<data here>);

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

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

然后我的嵌套集合(Tabs 集合)将拥有正确的数据，但是我如何创建每个 Tabs 集合的 View ？

我可以做:

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

但是这样我就会弄乱 View 和集合，我觉得这真的很困惑。有没有更好的方法，不涉及在同一个地方弄乱 View 和集合？

Answer 1

我只是将其发布在这里，以便其他人可以看到我是如何解决问题的

可以在此处找到该解决方案的工作演示:http://jsfiddle.net/NH9J6/146/

正如您从链接中看到的，这项工作是通过 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();
        }
    }
});

我在初始化中使用的小技巧(带有模板指定的 if/else)的工作方式如下:

我获取当前模型并检查它是否有“tabs”键。如果确实有，则意味着当前模型是窗口数据模型，因此我需要使用 window-template，否则使用 tab-template

其余部分是非常简单的主干结构。