How to do nested tabs(sub tabs) using backbone controller and views?

Question

I am beginner in Backbone development and I am trying to develop a Lifecycle management using Backbone. The project contains four main tabs, with subtabs in every tab. I created the main tabs using controllers, models and views etc. I also added navigation slider

That is all working fine, but I am confused about how to load the sub tabs within a main tab. My main question is, where do I start the controller for the sub tabs? Is it from the initialize method of the main tab's controller?

Code Overview: - Main controller loads the collection and models for each tab - Main controller shows the view of each tab when the main tab is clicked

// Declare pages collection
var mainpages = new TST.Collections.Pages([ new SCL.Models.Page({
    id : 1,
    name : "Main Tab1",
    route : "!/tab1",
    _controller : TST.Controllers.Tab1
}), new SCL.Models.Page({
    id : 2,
    name : "Main Tab2",
    route : "!/tab2",
    _controller : TST.Controllers.Tab2
}) ], {
    current : 1
});

// show the main layout
var layout = new TST.Layouts.Main({
    collection : mainpages
});
this.options.region.show(layout);

// show the menu
var menu = new TST.Views.Nav({
    collection : mainpages
});
layout.menu.show(menu);

Regions are declared in Main layout. And shows each tab on tab click using -> self.content.show(options.view, self.options.collection.goRight); where self = this

The controllers of each tab look like this

SCL.Routers.Tab1= Backbone.Marionette.AppRouter.extend({
    appRoutes : {
        "!/request" : "start"
    }
});

  SCL.Controllers.Tab1= TST.Framework.Controller.extend({
    initialize : function(options) {
        this.layout = new TST.Layouts.Tab1();
        this.router = new TST.Routers.Tab1({
            controller : this
        });
    },

    start : function() {
        app.vent.trigger("page:change", {
            view : this.layout
        });
    }
});

So now, How can I load a sub tabs under the Tab1??

Please share your ideas and help me... Thanks in advance!

I'm not really sure what your question is: "How can I load a sub tabs under the Tab1??" could mean many different things. It could mean "how do I append the sub tab DOM elements to the main tab DOM element?" or "how do I append the sub tab DOM elements to the page in a way that makes them appear below the tab DOM element?" or "How should I design my views for my tab/subtabs", or ... you get the idea. Please make your question as specific as possible, as it will make it easier for us to answer it. — machineghost
I can't understand the exact difference between your 1st and 2nd question, but i think the real question is 2nd. Ie, in my case there are some other tabs under the main tab Tab1. So when we moved to Tab1, we have to see the menus of sub tabs and need to see its body content while clicking on each sub tab. — Saidh

David Sulc David Sulc · Accepted Answer · 2013-06-04T08:30:02

Based on Derick Bailey's original article (http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/), I've written a blog post on a similar problem here: http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/

You should be able to apply the content from the blog post to solve your own challenge, since it's very similar in nature.

How to do nested tabs(sub tabs) using backbone controller and views?

1 Answers