Backbone Marionette を使用して複数の領域と 1 つのレイアウトを持つこのアプリケーションがあります。ときどき、まだレンダリングされていない dom 要素への el を参照する ItemView を作成するというこの問題が発生します。通常、ここでいくつかのレンダリング呼び出しを使用して解決します。ありますが、それは正しくありません。したがって、私の質問は、レイアウトをいつレンダリングするか、明示的にレンダリングする必要があるか、最初に領域を表示してからレイアウトをレンダリングするか、またはその逆にするかということだと思います。
これは私のコードの関連部分です。レイアウトで 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
}
});
}
});
});