How to ensure that Backbone has rendered the page completely?

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

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.

Answer 2

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 3

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