CODEWITHSUNDEEP
javascriptmodel-view-controllerbackbone.js
alexandernst
alexandernst

Reputation: 15099

Backbone nested views

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.com.com/cnwk.1d/i/tim//2010/08/24/firefox-panorama.jpg

Upvotes: 2

Views: 3666

Answers (2)

alexandernst
alexandernst

Reputation: 15099

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.

Upvotes: 2

lanan
lanan

Reputation: 2752

I would highly recommend 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.

Upvotes: 4

Related Questions