CODEWITHSUNDEEP
backbone.jsmarionette
kris kaman
kris kaman

Reputation: 101

Marionette view, controller , router relationship

I have a multi-faceted question

I have the following set up.

Using:

I have one main "router controller" to control my app. This controller reaches to use the controllers that represent a "tab"/area of the site. The example depicted illustrates my desire to use user tab's designated controller.

-

Rough description

Upvotes: 0

Views: 856

Answers (1)

Aubricus
Aubricus

Reputation: 476

I think you're asking 2 questions:

  1. "How do I write my sub-controllers so they return something useful?"
  2. "How do I manage sub-views?"

To answer #1:

This is quite easy in require with the define directive:

define(["underscore", "jquery", "backbone", "marionette"],
    function(_, $, Backbone, Marionette) {

        var SubController = Marionette.Controller.extend({
            // your code here...
        });
    }

    return SubController;
);

As you can see we return the controller object reference. This is passed to the subsequent main controller:

define(["underscore", "jquery", "backbone", "marionette", "path/to/SubController"],
    function(_, $, Backbone, Marionette, MyController) {

        var MacroController = Marionette.Controller.extend({

            initialize: function(options) {
                this.subController = new SubController();
            }
        });
    }

    return MacroController;
);

To answer #2:

Marionette gives you lots of options to manage views. Since I don't know exactly how you're code is structured it's hard to answer this directly.

Typically your Marionette.Application will define some main Marionette.Regions to manage application views. If you're user tab structure is the entire app, I'd say this is the right place to manage this. If not, Marionette offers the Marionette.Layout object. A Marionette.Layout is basically:

...a hybrid of an ItemView and a collection of Region objects. They are ideal for rendering application layouts with multiple sub-regions managed by specified region managers. Source

Marionette.Region objects take views and through some Marionette structure auto-magically handle closing events (for the most part anyway) and other clean up associated with views.

Here's a quote from the docs:

Regions provide consistent methods to manage, show and close views in your applications and layouts. They use a jQuery selector to show your views in the correct place.

I were building this I would avoid the master controller, however, and might structure this accordingly:

MyApplication
  // TabsController manages the layout below
  TabsController
    // Layout will manage tab clicks and swapping out content
    // in the tabsContentRegion
    TabLayout
      #tabsContentRegion

I always find David Sulc's book and the accompaning repo a great reference for Marionette application structure.

Let me know if you need any more help.

Upvotes: 1

Related Questions