MarionetteJS: Application Regions vs. Layouts

Question

I was reading the documentation of the latest version (2.3.0) and it is saying that Application Regions are now deprecated.

Application Regions

Warning: deprecated This feature is deprecated. Instead of using the Application as the root of your view tree, you should use a Layout View. To scope your Layout View to the entire document, you could set its el to 'body'. This might look something like the following: var RootView = Marionette.LayoutView.extend({ el: 'body' });

In most of the tutorials, including David Sulc's book Backbone Marionette: A Gentle Introduction it uses the following code snippet to add regions to an application.

Instead of the following example below, which uses addRegions, what should I be doing instead?

i.e.

var ContactManager = new Marionette.Application({});
ContactManager.addRegions({
    mainRegion: "#main-region"
});

var ContactView = Marionette.ItemView.extend({
    template: "#whatever",
    ui: {
        button: ".button".
    },
    events: {
        "click @ui.button": "click",
    },
    click: function () {
        console.log("do stuff here...");
    }
});

ContactManager.on("start", function () {
    var contactView = new ContactView({
        model: someModel
    });
    ContactManager.mainRegion.show(contactView);
});

Answer 1

Use a layoutview instead.

You could do for example:

var ContactManager = new Marionette.Application({});
var LayoutView = Backbone.Marionette.LayoutView.extend({
  template: "#layout-view-template",

  regions: {
    menu: "#menu",
    content: "#content"
  }
});

ContactManager.layout_view = new LayoutView(); 
ContactManager.layout_view.render(); 

I never actually add regions to my app object directly.