我使用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上时，我需要一次显示页面。
答案 0 :(得分：0)
实例化视图时，请向view_ready事件添加侦听器。当视图完成获取数据并进行渲染时，它会自动触发它 在父视图的render方法的末尾
self.trigger('view_ready');
在 Main 视图中添加如下内容：
this.listenTo(CustomerInfoView, 'view_ready', this.customer_info_ready);
this.listenTo(CustomerAccountsView, 'view_ready', this.customer_account_ready);
然后在主视图或主模型中添加2个属性：info_ready和customer_ready并将它们初始化为0 每次前面提到的2个事件中的一个被触发时，执行以下操作：
customer_info_ready : function(){
this.model.set('info_ready',true);
if (this.model.get('account_ready') === true) {
this.trigger('both_elements_ready');
}
}
customer_account_ready : function(){
this.model.set('account_ready',true);
if (this.model.get('info_ready') === true) {
this.trigger('both_elements_ready');
}
}
然后在主视图上为'both_elements_ready'添加一个监听器：
initialize: function() {
//your code
this.on('both_elements_ready',this.page_ready); }
编辑：添加了信息，使答案与问题更相关，更详细。
答案 1 :(得分：0)
编辑：这个答案的灵感来源于我从样本“ Brunch with Chaplin ”示例here中学到的内容。 Chaplin是建立在主干之上的框架。
好的，所以我要建议一个基于咖啡因的解决方案（我碰巧在咖啡中有一个解决方案：/！如果你想转换回js，请尝试使用js2coffee）
我们的想法是拥有一个主类 - 而不是视图 - 将app放在手中，而不是主视图。
module.exports = class Application
initialize: (finished_init) =>
@collection = new Collection()
@main_view = new View()
@collection.fetch(
success: (collection) =>
@main_view.collection = @collection
finished_init()
)
render: (targetLocation, params) ->
switch targetLocation
when "main" then (
@main_view.render()
)
在initialize方法中，我们获取集合数据。成功时，会调用finshed_init()。您可以将其替换为@render（顺便说一句，@ ==此:)）
以下是我初始化应用的方式：
$ ->
app = new Application()
app.initialize( ->
#----------------------------------#
# Create the router and its routes
# This is called at the finished_init() of the Application class
#----------------------------------#
app_router = new Router
)
fetche 你可以有一个监控fetche完成的功能，或你可以尝试使用async。它有一个很好的`parallel函数就可以做到这一点。
@collection1 = new Collection()
@collection = new Collection()
@main_view1 = new View()
@main_view2 = new View()
async.parallel [ (callback) ->
setTimeout (->
@collection1.fetch(
success: (collection) =>
@main_view1.collection = @collection
callback null, "one"
), 200
, (callback) ->
setTimeout (->
@collection2.fetch(
success: (collection) =>
@main_view2.collection = @collection
callback null, "two"
), 100
], (err, results) ->
if not err
@render() # Render what you want
答案 2 :(得分：0)
经过一段时间的打破我的头脑，并在Google上搜索，我找到了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]);
}
});
}
});
感谢所有帮助我解决此问题的人。