主干嵌套视图答案

【问题标题】：Backbone nested views主干嵌套视图
【发布时间】：2013-05-14 07:13:42
【问题描述】：

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

主要问题是我不确定我是否走在正确的道路上。第二个问题是我不确定如何从我的Windows Collecion view 加载每个Tabs collection view。

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

【问题讨论】：

标签： javascript model-view-controller backbone.js

【解决方案1】：

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

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

【讨论】：

【解决方案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）的工作方式如下：

我得到了当前的模型并检查它是否有一个“tabs”键。如果有，说明当前模型是Window Data Model，所以我需要使用window-template，否则使用tab-template

其余的几乎都是简单的 Backbone 结构。

【讨论】：