Aninhando regiões, layouts e visualizações de marionetes

Question

Estou tentando fazer com que minhas visualizações do Marionette funcionem em combinação com regiões e layouts de aplicativos, mas simplesmente não consigo fazer com que as visualizações aninhadas no layout sejam renderizadas.

Editar: Eu esperava tanto o OptionsView e BreadcrumbsView ser renderizado no NavigationLayout, que deve ser renderizado na região de navegação.No entanto, a região de navegação não é renderizada.O console não mostra nenhum erro.

Minha estrutura é a seguinte:

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

Atribuir um ItemView para a região de navegação funciona conforme o esperado.

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

Um caso de teste reduzido pode ser encontrado aqui

Answer 1

Ok, finalmente encontrei o problema:Você não pode nomear uma região options em um layout.

Todas as regiões definidas em um Layout são anexadas diretamente à instância do layout.Então, uma região definida assim:

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

acaba configurando o layoutInstance.options para a instância da região.Isso é um problema porque Backbone.View define e usa o options para outros fins.

Renomear a região para algo diferente de uma palavra-chave ou atributo existente usado por qualquer visualização existente corrigirá isso.

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

Trabalhando JSFiddle aqui: http://jsfiddle.net/tegon/64ovLf64/