Backbone.js 在正确的时间渲染布局

我有一个应用程序，有几个区域和一个使用主干木偶网的布局，有时我会遇到这样的问题：创建一个ItemView引用它的el到dom元素，而这个元素还没有被渲染，我通常在这里和那里通过一些渲染调用来解决这个问题，但感觉不太对劲。所以我的问题是什么时候渲染布局，我应该显式渲染，我应该先显示区域，然后再渲染布局，还是相反

这是我的代码的相关部分，您可以看到我在布局上显式地调用render方法，然后显示区域，不确定这是否是正确的方法：

AllegroWidget.addInitializer(function (options) {

                // load templates and append them as scripts
                inject_template("/js/ordering-widget/tpl/combined.html");

                // create app layout using the 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 the service providet model, categories and models
                // @todo move this code to a marionette controller when things get 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 the user model and 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 the model available globaly, mainly for the facebook login
                        window._user_model = _user_model;

                        var _categories_collection = response.get("categories");

                        // create the 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 the wizard event availablt globally, for the facebook login as well
                        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 it
                        jQuery('#categories-container').isotope({
                            // options
                            itemSelector: '.category',
                            masonry: {
                                columnWidth: 410
                            }
                        });




                    }
                });

            });

我建议在布局上使用“on show”侦听器来呈现布局的视图。您可以在此处看到该解决方案的实现：

---

请注意，我们创建了布局实例以及它将显示的视图。然后，当显示布局时，我们让布局的区域显示正确的视图。

我创建了一个主区域，覆盖应用程序DOM，负责呈现布局