I'm working on a Backbone application and I'm not sure if the way what I'm trying to do is the correct way.

I have an application view and inside that application view I'm trying to append a collection view, and each view in that collection is a collection too.

Let me explain that graphically.

----------------------------------------------------------------------
|                                                                    |
|    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|  |  |   |
|    |  | ---------- ----------  |   | ---------- ----------  |  |   |
|    |  |------------------------|   |------------------------|  |   |
|    |                                                           |   |
|    -------------------------------------------------------------   |
|                                                                    |
|                                                                    |
----------------------------------------------------------------------

Currently I'm loading the application view from the initialize method in my Backbone router. That view loads the Windows collection view.

The main problem is that I'm not sure if I'm on the right way. The second problem is that I'm not really sure how to load each Tabs collection view from my Windows Collecion view.

PS: Just to make things even clearer, I'm trying to replicate Firefox's panorama view: .1d/i/tim//2010/08/24/firefox-panorama.jpg

I'm working on a Backbone application and I'm not sure if the way what I'm trying to do is the correct way.

I have an application view and inside that application view I'm trying to append a collection view, and each view in that collection is a collection too.

Let me explain that graphically.

----------------------------------------------------------------------
|                                                                    |
|    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|  |  |   |
|    |  | ---------- ----------  |   | ---------- ----------  |  |   |
|    |  |------------------------|   |------------------------|  |   |
|    |                                                           |   |
|    -------------------------------------------------------------   |
|                                                                    |
|                                                                    |
----------------------------------------------------------------------

Currently I'm loading the application view from the initialize method in my Backbone router. That view loads the Windows collection view.

The main problem is that I'm not sure if I'm on the right way. The second problem is that I'm not really sure how to load each Tabs collection view from my Windows Collecion view.

PS: Just to make things even clearer, I'm trying to replicate Firefox's panorama view: http://i.i../cnwk.1d/i/tim//2010/08/24/firefox-panorama.jpg

• javascript
• model-view-controller
• backbone.js

Share Improve this question Follow edited May 19, 2013 at 18:20 alexandernst asked May 19, 2013 at 17:35 alexandernstalexandernst 15.1k2525 gold badges107107 silver badges213213 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I would highly remend using Marionette.js to structure your application.

It already has collection views built in which makes rendering easy. Your application seems to be a perfect use case. You will get a lot of boilerplate code for free.

I'm just posting this here so others can see how I solved the problem

A working demo of the solution can be found here (original fiddle).

As you can see from the link, the work is done thanks to Marionette's CompositeView which lets recursively render collections.

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();
        }
    }
});

The small trick I'm using in the initialize (the if/else with the template asignation) works the following way:

I get the current model and check if it has a "tabs" key. If it does have it, it means that the current model is a Window Data Model, so I need to use the window-template, else use the tab-template

The rest is pretty much plain Backbone structure.