0
我有这个应用程序与几个区域和一个布局使用骨干木偶，我不时有这个问题创建一个ItemView引用它的EL到尚未呈现的DOM元素，我通常用一些渲染调用来解决这个问题，但它不适合。所以我想我的问题是什么时候渲染布局，我应该显式渲染，应该先显示区域，然后渲染布局或其他方式，在合适的时间渲染布局
这是我的代码的相关部分，因为你可以看到即时调用explcitly布局上的渲染方法，然后即时通讯展示区，不知道这是做事情的正确方法：
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
}
});
}
});
});