How to create multiple layouts using MarionetteJS?

Question

I have my backbone marionette and requireJS application structured in different folders: collections, controllers, config, init, models, routers, services, templates and views.

There is one region called mainRegion defined in the AppInit file. How should I change the views I am using in the mainRegion?

One option is having a Layout with two regions like header and content in the mainRegion using Marionette Layouts.

Where should I create my layout? In the views folder or controller folder or any thing else?

bejonbee bejonbee · Accepted Answer · 2014-03-05T18:45:21

Your suggestion of creating a Layout is perfectly valid.

Here's another option. The Marionette Application is alot like a Layout with support for multiple regions so you could define your application like this:

App.addRegions({
  header: "#header",
  main: "#main"
});

If main is very complex, it can be a layout also with nested regions. For example, if you have a sidebar, content, and footer, it could be arranged like this:

app                 -> Marionette.Application
  header              -> Marionette.Region
  main                -> Marionette.Region
    mainLayout          -> Marionette.Layout
      sidebar             -> Marionette.Region
      content             -> Marionette.Region
      footer              -> Marionette.Region

After showing your views it would look like this:

app                 -> Marionette.Application
  header              -> Marionette.Region
    headerContent       -> YourHeaderViewClass
  main                -> Marionette.Region
    mainLayout          -> Marionette.Layout
      sidebar             -> Marionette.Region
        sidebarContent      -> YourSidebarView
      content             -> Marionette.Region
        appContent          -> YourAppContentView
      footer              -> Marionette.Region
        footerContent       -> YourFooterView

Regarding organization, Layouts are a kind of view, so I sometimes place them in my views folder.

However, if I end up with many layouts I'll create another folder next to views called layouts and organize them separately

...
views/
  viewA.js
  viewB.js
layouts/
  mainLayout.js
  otherLayout.js
...

How to create multiple layouts using MarionetteJS?

1 Answers