How to ensure that Backbone has rendered the page completely? - backbone.js

Question

I work on a large enterprise application with BackboneJS. One page in the application is constructed using multiple sub-system calls via REsT. How do I make sure that, all the services required to load the page has been called and the templates are binding is completed?
For example, I have a MasterView, that takes care of the collection.fetch() of each child views, like this.
 
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]);
            }
        });
    }
});
I have a view set for the page, that takes care of rendering two other views CustomerInfo and CustomerAccounts. The view goes like this.
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});
    }
});
 
And CustomerInfo and CustomerAccount views, looks like this,
 
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}));
    }
});
 
I would like to know if there is any way to know from the myApp.views.CustomerView that the views CustomerInfo and CustomerAccounts has completed its rendering? The main problem I have here is the CustomerInfo view loads quickly but the CustomerAccount view takes some time to load. Hence I need to display the page on one shot, when both the views are ready on DOM.

Answer 1

When you instantiate your views add a listener to a view_ready event. When the view finishes fetching the data and rendering make it trigger it on itself
At the end of the render method of the parent view
self.trigger('view_ready');
And on the Main view add something like :
this.listenTo(CustomerInfoView, 'view_ready', this.customer_info_ready);
this.listenTo(CustomerAccountsView, 'view_ready', this.customer_account_ready);
Then in your main view or main model add 2 properties : info_ready and customer_ready and initialize them to 0
Each time one of the 2 previously mentioned event is fired do something like the following :
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');
}
}
Then add a listener to 'both_elements_ready' on your main view :
initialize: function() {
//your code
this.on('both_elements_ready',this.page_ready); }
EDIT: Added info to make answer more relevant to question and more detailed.

Answer 2

Edit: This answer is inspired by what I learned from a sample "Brunch with Chaplin" example here. Chaplin is a framwork built on top of backbone.
Ok, so I'm going to suggest a coffeescript based solution (I just happen to have a solution in coffee :/ ! Try using js2coffee if you want to convert back to js)
The Master Class
The idea is to have a master class - not view - that will hold the app in it's hand, instead of the master view.
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()
)
In the initialize method, we fetch the collection data. On success, the finshed_init() is called. You can replace it with #render (Btw, # == this :) )
Initialization
Here's how I'd initialize my app:
$ ->
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
)
Running More than one fetche Asynchronously
You could have a function that monitors fetche's completion, or you could try using async. It has a nice `parallel function that does just that.
#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

Answer 3

After breaking my head for quite sometime, and searching on Google, I found this link.
So I made few changes to my MasterView and it was working and have solved the problem I had. The change I made in the MasterView is this
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]);
}
});
}
});
Thanks to all those who have helped me solve this.