backbone.js - Nesting Marionette regions, layouts and views

Question

I'm trying to get my Marionette views working in combination with application regions and layouts, but I just can't seem to get the nested views in the layout to render.

Edit: I expected both the OptionsView and BreadcrumbsView to be rendered in the NavigationLayout, which should be rendered in the navigation region. However, the navigation region isn't rendered at all. The console doesn't show any errors.

My structure is as follows:

- Navigation region
  - Navigation layout
    - Options region 
    - Breadcrumbs region
- Content region

Assigning an ItemView to the navigation region works as expected.

App = new Backbone.Marionette.Application();
App.addRegions({
    'nav': '#nav',
    'content': '#content'
});

var NavigationLayout = Backbone.Marionette.Layout.extend({
    template: '#nav-template',
    regions: {
        'breadcrumbs': '#breadcrumbs',
        'options': '#options'
    }
});

var BreadcrumbsView = Backbone.Marionette.ItemView.extend({
    template: '#breadcrumbs-template'
});

var OptionsView = Backbone.Marionette.ItemView.extend({
    template: '#options-template'
});

var ContentView = Backbone.Marionette.ItemView.extend({
    template: '#content-template'
});

App.addInitializer(function(options) {
    var navigationLayout = new NavigationLayout();

    App.nav.show(navigationLayout);
    App.content.show(new ContentView());

    navigationLayout.breadcrumbs.show(new BreadcrumbsView());
    navigationLayout.options.show(new OptionsView());
});

$(function() {
    App.start();
});

A reduced test case can be found here

Answer 1

Ok, finally found the problem: You can't name a region options in a layout.

All of the regions that are defined in a Layout are directly attached to the layout instance. So, a region defined like this:

Layout.extend({
  regions: {
    options: "#options"
  }
});

ends up setting the layoutInstance.options to the Region instance. This is a problem because Backbone.View defines and uses the options for other purposes.

Renaming the region to anything other than an existing keyword or attribute used by any existing view will fix this.

Layout.extend({
  regions: {
    optionRegion: "#options"
  }
});

Working JSFiddle here: http://jsfiddle.net/tegon/64ovLf64/