Я работаю над большим корпоративным приложением с BackboneJS. Одна страница в приложении создается с использованием нескольких вызовов подсистемы через REST. Как мне убедиться, что все службы, необходимые для загрузки страницы, были вызваны, а привязка шаблонов завершена?
Например, у меня есть MasterView, который заботится о collection.fetch() каждого дочернего представления, вот так.
myApp.views.MasterView = Backbone.View.extend({
initialize: function(params) {
var self = this;
this.collection.fetch({
success: function(resp) {
self.collection.bind("reset", self.render(), self);
},
error: function(xhr, xhrStatus) {
// push error message, in case of fetch fails.
}
});
},
render: function() {
var self = this;
this.collection.each(function(model) {
if (model.get('authorize') && model.get('status') === "success" && model.get('data').length > 0) {
self.bindTemplate(model.get('data')[0]);
}
});
}
});
У меня есть набор представлений для страницы, который отвечает за отображение двух других представлений CustomerInfo и CustomerAccounts. Вид идет так.
myApp.views.CustomerView = Backbone.View.extend({
initialize: function() {
var customerInfo = new myApp.collection.CustomerInfo();
new myApp.views.CustomerInfo({el: $("#infoContainer"), collection: customerInfo});
var customerAccount = new myApp.collection.CustomerAccount();
new myApp.views.CustomerAccount({el: $("#accountContainer"), collection: customerAccount});
}
});
Представления CustomerInfo и CustomerAccount выглядят так:
myApp.views.CustomerInfo = myApp.views.MasterView.extend({
initialize: function() {
var self = this;
myApp.views.MasterView.prototype.initialize.call(self, {
qParam1: "qparam1",
qParam2: "qparam2"
});
},
render: function() {
var self = this;
self.template = _.template(myApp.Templates.get("customer-page/customer-info"));
myApp.views.MasterView.prototype.render.apply(self);
},
bindTemplate: function(data) {
var self = this;
$(self.el).html(self.template({"info": data}));
}
});
myApp.views.CustomerAccounts = myApp.views.MasterView.extend({
initialize: function() {
var self = this;
myApp.views.MasterView.prototype.initialize.call(self, {
qParam1: "qparam1"
});
},
render: function() {
var self = this;
self.template = _.template(myApp.Templates.get("customer-page/customer-accounts"));
myApp.views.MasterView.prototype.render.apply(self);
},
bindTemplate: function(data) {
var self = this;
$(self.el).html(self.template({"accounts": data}));
}
});
Я хотел бы знать, есть ли способ узнать из myApp.views.CustomerView, что представления CustomerInfo и CustomerAccounts завершили рендеринг? Основная проблема заключается в том, что представление CustomerInfo загружается быстро, а представление CustomerAccount загружается некоторое время. Следовательно, мне нужно отобразить страницу за один раз, когда оба представления готовы в DOM.
