Question

我正在开发一个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|  |  |   |
|    |  | ---------- ----------  |   | ---------- ----------  |  |   |
|    |  |------------------------|   |------------------------|  |   |
|    |                                                           |   |
|    -------------------------------------------------------------   |
|                                                                    |
|                                                                    |
----------------------------------------------------------------------

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

主要问题是我不确定我是否正确。第二个问题是，我不确定如何加载Tabs collection view中的每个Windows Collecion view。

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

Answer 1

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

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

Answer 2

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

解决方案的工作演示可以是found here（original fiddle）。

正如您从链接中看到的那样，工作完成归功于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 with template asignation）的工作方式如下：

我获取当前模型并检查它是否有“标签”键。如果确实有，那就意味着当前模型是一个窗口数据模型，所以我需要使用window-template，否则使用tab-template

其余的非常简单的Backbone结构。

骨干嵌套视图

2 个答案: