1

这是另一个问题的详细问题（带有一些 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 集合的视图？

我可以做：

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

但后来我会弄乱视图和收藏，我觉得这真的很乱。有没有更好的方法不涉及在同一个地方弄乱视图和集合？

4

1 回答 1

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

其余的几乎是普通的 Backbone 结构。

于 2013-05-23T07:28:11.747 回答