MarionetteJS: Application Regions vs. Layouts [duplicate]

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);
});

Reputable

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.

Endoblast

Can the layout view be rendered before app.start() is called or does it have to be called inside the onStart handler? – Reputable

Rendering a layout view is synchronous, so you just have to make sure that the layout is rendered before you want to show views in its regions. Other than that, you can do it when you prefer. Also note that you can define regions based on elements that are already in the DOM, should you want to create regions to show views on the fly. – Endoblast

Actually, how do you know attach the rendered view to the DOM? Let's say I have a template with the elements #menu and #content, but how I actually attach this rendered layout view to the html? – Reputable

@Reputable You need to define an el property on the layout and then render it. – Endoblast