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

There's not enough info to know what's going on. What errors are you getting, if any? What behavior are you seeing vs what were you expecting? — Derick Bailey, Sep 30 '12 at 18:07
are you using Marionette.Async? or any other code in here that runs async? — Derick Bailey, Oct 01 '12 at 02:59
No, the code above is all the Javascript in this test case, together with the latest release of jQuery, Underscore, Backbone and Marionette. I updated the link to the entire test, pastebin.com seemed to be down. — joelcox, Oct 01 '12 at 05:55

score 18 · Accepted Answer · edited Oct 28 '15 at 18:56

18

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/

edited Oct 28 '15 at 18:56

rafaelcastrocouto

11,781
3
38
63

answered Oct 01 '12 at 13:49

Derick Bailey

72,004
22
206
219

How does your example know where to append the HTML to? I'm having trouble getting a grip on how layouts are rendered to the DOM without having to use .html() or .append()? http://stackoverflow.com/questions/15658403/rendering-layouts-and-sub-views-in-marionette-backbone-js – streetlight Mar 27 '13 at 12:18
1

@streetlignt You probably figured this out by now, but, you use a templating system. underscore and handlebars are two that are commonly used. – eggmatters Nov 11 '13 at 21:10

Nesting Marionette regions, layouts and views

1 Answers1

Linked