如何确保Backbone已经完全渲染了页面？
如何确保Backbone已经完全渲染了页面？
提问于 2013-05-09 13:54:12
我使用BackboneJS开发一个大型企业应用程序。应用程序中的一个页面是通过REsT使用多个子系统调用构建的。如何确保加载页面所需的所有服务都已被调用，并且模板绑定已完成？
例如，我有一个MasterView，它负责每个子视图的collection.fetch()，如下所示。3.
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上准备好时，我需要在一个快照上显示页面。
Stack Overflow用户
回答已采纳
发布于 2013-05-17 00:44:58
在经历了相当长的一段时间后，我在谷歌上搜索，找到了this link。
所以我对我的MasterView做了很少的修改，它就能工作了，并且解决了我的问题。我在MasterView中所做的更改如下
var activeConnections=0;
myApp.views.MasterView = Backbone.View.extend({
initialize: function(params) {
activeConnections++;
var self = this;
this.collection.fetch({
success: function(resp) {
activeConnections--;
self.collection.bind("reset", self.render(), self);
if(activeConnections===0){
// trigger the page has finished rendering
}
},
error: function(xhr, xhrStatus) {
// push error message, in case of fetch fails.
if(activeConnections===0){
// trigger the page has finished rendering
}
}
});
},
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]);
}
});
}
});感谢所有帮助我解决这个问题的人。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16455313
复制相关文章
相似问题
腾讯云开发者
