我有这个应用程序，它有几个区域和一个使用 Backbone Marionette 的布局，有时我会遇到这个问题，即创建一个 ItemView 将其 el 引用到尚未渲染的 dom 元素，我通常在这里使用一些渲染调用来解决它那里，但感觉不对。所以我想我的问题是什么时候渲染布局，我应该明确渲染它，我应该先显示区域然后渲染布局还是相反，
这是我的代码的相关部分，你可以看到我在布局上显式调用渲染方法，然后我显示区域，不确定这是否是正确的做事方式：
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
}
});
}
});
});