Backbone Marionette Layout and Composite View Not Rendering

Question

I've got a view which houses a number of sub views. My plan was to make use of Marionette's layout object as a skeletal view like so:

define([
  'app',
  'views/orders/list',
  'text!templates/orders/main.html'
],
function (app, ListView, template) {
  'use strict';

  var View = Backbone.Marionette.Layout.extend({
      template : _.template(template),

      id : 'orders',

      regions : {
          list : '#list'
      },

      initialize : function () {
          this.listView = new ListView({
            collection : this.collection
          });

          // And render it here? Seems like a bad idea.
          this.list.show(this.listView);
      }
  });

  return View;
});

ListView is a composite view I created:

define([
    'app',
    'views/orders/list-item',
    'text!templates/orders/list.html'
],
function (app, ListItem, template) {
  'use strict';

  var View = Backbone.Marionette.CompositeView.extend({
    template : _.template(template),

    itemView : ListItem,
    itemViewContainer : '.items',
  });

  return View;
});

The problem is if when I pass listView to the region, it doesn't render with a list of items from my collection. It only renders the wrapper. If I call the render method on listView directly and check the element ... everything is constructed correctly.

Does the layout code stop the composite view from rendering properly? am I rendering at the wrong place? Perhaps this isn't even a proper way of working sub-views?

Any help appreciated!

Note: Collection is made from hard coded values for testing purposes.

Rayweb_on Rayweb_on · Accepted Answer · 2013-11-12T15:42:03

at the time you initialize the Layout its HTML is not rendered yet, change the initialize code the the onRender function of Layout, at that time the HTML (the regions) will be there

var View = Backbone.Marionette.Layout.extend({
  template : _.template(template),

  id : 'orders',

  regions : {
      list : '#list'
  },

  onRender: function () {
      this.listView = new ListView({
        collection : this.collection
      });

      // And render it here? Seems like a bad idea.
      this.list.show(this.listView);
  }

});

Backbone Marionette Layout and Composite View Not Rendering

1 Answers