2

我正在开发一个 Backbone 应用程序，我不确定我尝试做的方式是否正确。

我有一个应用程序视图，在该应用程序视图内我试图附加一个集合视图，并且该集合中的每个视图也是一个集合。

让我用图形解释一下。

----------------------------------------------------------------------
|                                                                    |
|    Application view                                                |
|                                                                    |
|    -------------------------------------------------------------   |
|    |  Windows Collection view                                  |   |
|    |                                                           |   |
|    |  --------------------------   --------------------------  |   |
|    |  | Tabs collection view   |   | Tabs collection view   |  |   |
|    |  |                        |   |                        |  |   |
|    |  | ---------- ----------  |   | ---------- ----------  |  |   |
|    |  | |Tab view| |Tab view|  |   | |Tab view| |Tab view|  |  |   |
|    |  | ---------- ----------  |   | ---------- ----------  |  |   |
|    |  |                        |   |                        |  |   |
|    |  | ---------- ----------  |   | ---------- ----------  |  |   |
|    |  | |Tab view| |Tab view|  |   | |Tab view| |Tab view|  |  |   |
|    |  | ---------- ----------  |   | ---------- ----------  |  |   |
|    |  |------------------------|   |------------------------|  |   |
|    |                                                           |   |
|    |  --------------------------   --------------------------  |   |
|    |  | Tabs collection view   |   | Tabs collection view   |  |   |
|    |  |                        |   |                        |  |   |
|    |  | ---------- ----------  |   | ---------- ----------  |  |   |
|    |  | |Tab view| |Tab view|  |   | |Tab view| |Tab view|  |  |   |
|    |  | ---------- ----------  |   | ---------- ----------  |  |   |
|    |  |                        |   |                        |  |   |
|    |  | ---------- ----------  |   | ---------- ----------  |  |   |
|    |  | |Tab view| |Tab view|  |   | |Tab view| |Tab view|  |  |   |
|    |  | ---------- ----------  |   | ---------- ----------  |  |   |
|    |  |------------------------|   |------------------------|  |   |
|    |                                                           |   |
|    -------------------------------------------------------------   |
|                                                                    |
|                                                                    |
----------------------------------------------------------------------

目前我正在从initialize我的主干路由器中的方法加载应用程序视图。该视图加载Windows collection view.

主要问题是我不确定我是否走对了路。第二个问题是我不确定如何Tabs collection view从我的Windows Collecion view.

PS：为了让事情更清楚，我正在尝试复制Firefox的全景视图：http: //iicom.com/cnwk.1d/i/tim//2010/08/24/firefox-panorama.jpg

4

2 回答 2

4

我强烈建议使用Marionette.js来构建您的应用程序。

它已经内置了集合视图，使渲染变得容易。您的应用程序似乎是一个完美的用例。您将免费获得大量样板代码。

于 2013-05-22T22:01:25.973 回答
2

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

可以在此处找到该解决方案的工作演示（原始小提琴）。

正如您从链接中看到的那样，这项工作的完成要归功于 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:26:40.617 回答