Marionettejs - How to make a layoutView show a region automatically when render

Question

Here is my layoutView definition:

var OuterLayout = Backbone.Marionette.LayoutView.extend({
    template: compiledTplFunc, 
    el: '#main',
    regions: {
        header: '#header', 
        content: '#content', 
        footer: '#footer'
    },
    initialize: function () {
        // alert('initializing');
        this.header.show(new Header());
        // this.footer.show(new Footer());
    }
});

// below are render code in route definition:

var AppRouter = Backbone.Marionette.AppRouter.extend({
    routes : {
        '': 'index',
        'about': 'about', 
        'app' : 'startApp',
        'signup' : 'signup', 
        'login' : 'login'
    }, 
    index : function () {
        outerlayout.render();

        var Header =  require('../header/header');
        var Content =  require('../contentIndex/contentIndex');
        var Footer = require('../footer/footer');
        ol.header.show(new Header());
        ol.content.show(new Content());
        outerLayout.footer.show(new Footer());    
    }, .....

There are several routes, I don't want to attach menu and footer everything in the route when render I'd like to make it automatically attach the some regions, e.g.: #header, and #footer. What should I do to achieve this?

Thanks!

Answer 1

Just render what you want to always render with the layout in the onRender function of your layout. Based on your code, it would look something like this:

OuterLayout.prototype.onRender = function () {
  var Header =  require('../header/header');
  var Footer = require('../footer/footer');
  this.header.show(new Header());
  this.footer.show(new Footer());
}