Changing layouts depending on routes

Question

I have a working Marionette app using modules together with RequireJS modules largely based on David Sulc's book.

When the server serves the index.html, which includes some base regions (menuRegion and mainRegion), my app.js starts the Marionette app. The app automatically loads the MenuApp module for the menu, and depending on the route, loads a certain module for the main content (i.e KanbanApp). Thus, I require all modules that define routes to be fully loaded before starting the app.

i.e

require(["apps/home/home_app", "apps/kanban/kanban_app"], function(){
    Backbone.history.start();
});

At this point, the app is always using the regions defined in the index.html/app.js.

Now, I realize I need a landing page (login form, etc) to be included in the app which has a different layout. I have tried different approaches but I always get to a dead end. Which steps would you try to follow?

My main idea is that depending on the route, an "AppLayout" or "LandingLayout" is loaded. However, the fact that the routes are defined in submodules and I don't have a Main router makes this complicated. Additionally, I am unsure on where would the code for this logic go, maybe to a new extra layer between app.js and each submodule .js? I am unsure this would be the best solution because things get overcomplex. For example: Now when /route-from-the-real-app is called, a submodule route captures it and executes the controller. Until now the controller basically filled the mainRegion. But now, the controller also needs to call this extra layer to display the AppLayout and additionally, trigger an event for the MenuApp to be displayed in the menuRegion. This shouldn't be the original KanbanApp task.

This is how I am unsuccessfully trying to accomplish to do this, but any ideas working on my current code would be greatly appreciated:

I move the regions declared in the index.html/app.js into a new layout and leave it with a unique content region. LandingApp, displays its content here when "/" without problems.
I don't load MenuApp together with the app start anymore.
I created a new MainApp module, with the idea of it being the new extra layer. This module instantiates the LayoutView and adds it to the content region when an event is triggered.

I am unsure on how/when should I load both the MenuApp and the MainApp. As they have no defined routes, I don't require them with the app start, but I need them to register the event handlers.

You can view the full code (very simple) of the app before any of this changes had been applied here: https://github.com/mezod/multikanban

How would you approach this without using any advanced patterns or external libs?

Tom Tom · Accepted Answer · 2015-02-18T15:21:29

If I understand the question right, you are asking for strategies involved with changing the "page" of your app?

I believe the general approach is to have one layout view instantiated in the app object which represents the container for the "page". That layout view could have a region called page. You could then switch views easily via that region. For example:

var App = Marionette.Application.extend({

    changePage : function(view) {
        this.rootView.page.show(view);
    },

    onStart : function() {

        this.rootView = Marionette.LayoutView.extend({
            el: 'body',
            regions: {
            'page' : '.page-container' // some div on the page <div class="page-container"></div>
            }
        });

    });
});

Then to change the page (whether in a route method or somewhere else in the app) you can just go App.changePage(myNewPageView). That other page (myNewPageView) could also be a layout view which might contain a region for a sidebar, or a header, or whatever you want.

Changing layouts depending on routes

1 Answers