backbone.js - Rendering Layout in the right time -

i have application several regions , 1 layout using backbone marionette, time time have problem of creating itemview refering el dom element yet rendered, work out rendering calls here , there doesnt feel right. gues question when render layout, should render explicitly, should show regions first , render layout or other way around,

this relevant part of code, can see im calling explcitly render method on layout , im showing regions, not sure if right way things:

allegrowidget.addinitializer(function (options) {                  // load templates , append them scripts                 inject_template("/js/ordering-widget/tpl/combined.html");                  // create app layout using skeleton                 var applayout = backbone.marionette.layout.extend({                     el: "#allegro-ordering-widget",                     template: "#template-skeleton",                     regions: {                         checkout: "#allegro-checkout",                         wizard: "#allegro-checkout-wizard",                         categories: "#allegro-categories-content"                     }                 });                  allegrowidget.layout = new applayout();                 allegrowidget.layout.render();                  // initialize service providet model, categories , models                 // @todo move code marionette controller when things messier                 //var _category_collection = new categorycollection();                 var _service_provider_model = new serviceprovidermodel;                 _service_provider_model.fetch({                     headers: { 'x-apikey': window.xapikey },                     success: function (response) {                          // create user model , categories collection                         var _user_model;                         var _user = window.localstorage.getitem("user");                         if ((_user != null) && (_user != "undefined") ) {                             _user = json.parse(_user);                             _user_model = new usermodel({ id: _user.id });                             _user_model.fetch({                                 headers: { 'x-apikey': window.xapikey },                                 success: function (response) {                                     _user_model.set({ logged: true });                                 }                             });                         } else {                             _user_model = new usermodel();                         }                         // make model available globaly, facebook login                         window._user_model = _user_model;                          var _categories_collection = response.get("categories");                          // create views                         var _cateogories_view = new categorycollectionview({                             api_key: window.xapikey,                             collection: _categories_collection                         });                          var _order_model = new ordermodel;                          var _wizard_vent = _.extend({}, backbone.events);                         // make wizard event availablt globally, facebook login                         window._wizard_vent = _wizard_vent;                         var _order_wizard_layout = new orderwizardlayout({                             user: _user_model,                             service_provider_model: _service_provider_model,                             wizard_vent: _wizard_vent,                             rgns: {                                 account: true,                                 lp: (_service_provider_model.get("modules").findwhere({ hash: "loyalty-points" }) != null),                                 delivery: true,                                 payment: true,                                 thankyou: true                             }                         });                           var _checkout_view = new checkoutview({                             collection: _order_model.get("order_items"),                             order: _order_model,                             service_provider_model: _service_provider_model,                             user: _user_model,                             categories_collection: _categories_collection,                             order_wizard_itemview: _order_wizard_layout                         });                          allegrowidget.layout.categories.show(_cateogories_view);                         allegrowidget.layout.checkout.show(_checkout_view);                         allegrowidget.layout.wizard.show(_order_wizard_layout);                          _order_wizard_layout.render();                          _order_wizard_layout.account.show(new wizardaccountview({                             user: _user_model,                             wizard_vent: _wizard_vent                         }));                          if ( _.has(_order_wizard_layout,"lp")) {                             _order_wizard_layout.lp.show(new wizardloyaltypointsview({                                 lp: _service_provider_model.get("loyalty_points"),                                 categories: _service_provider_model.get("categories"),                                 paths: _service_provider_model.get("paths"),                                 wizard_vent: _wizard_vent,                                 order: _order_model,                                 user: _user_model                             }));                         }                           _order_wizard_layout.delivery.show(new wizarddeliveryview({                             order: _order_model,                             countries: _service_provider_model.get("countries"),                             branches: _service_provider_model.get("branches"),                             country: _service_provider_model.get("country"),                             user: _user_model,                             wizard_vent: _wizard_vent                         }));                          var _wizard_receipt_model = new wizardthankyoumodel;                         _order_wizard_layout.payment.show(new wizardpaymentview({                             wizard_vent: _wizard_vent,                             user: _user_model,                             order: _order_model,                             receipt: _wizard_receipt_model,                             module_lp: _.has(_order_wizard_layout, "lp")                         }));                         _order_wizard_layout.thankyou.show(new wizardthankyouview({                             wizard_vent: _wizard_vent,                             receipt_message: _service_provider_model.get("tpl_order_receipt"),                             model: _wizard_receipt_model                         }));                           // masonry                         jquery('#categories-container').isotope({                             // options                             itemselector: '.category',                             masonry: {                                 columnwidth: 410                             }                         });                         }                 });              }); 

i suggest using "on show" listener on layout render layout's views. can see implementation of solution here :https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#l43

notice create layout instance, views display. then, when layout shown, have layout's regions display proper views.