0
У меня есть это приложение с несколькими регионами и одним макетом, использующим Магистральную Магическую линию, время от времени у меня возникает эта проблема создания ItemView, ссылающегося на его элемент el to dom, который еще предстоит визуализировать, я обычно работайте с некоторыми вызовами рендеринга здесь и там, но он не чувствует себя хорошо. Поэтому я задаю себе вопрос, когда нужно визуализировать макет, должен ли я отображать его в явном виде, должен ли я показывать области сначала, а затем отображать макет или наоборот,Рендеринг макета в нужное время
это важная часть моего кода, так как вы можно увидеть им вызов explcitly метода визуализации на макете, а затем IM показаны регионы, не уверены, что это правильный способ сделать вещи:
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
}
});
}
});
});