Databases
StackOverflow2013
Postsdbo
POHow to ensure that Backbone has rendered the page completely?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to ensure that Backbone has rendered the page completely?
    text
    copied!<p>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?</p> <p>For example, I have a <code>MasterView</code>, that takes care of the <code>collection.fetch()</code> of each child views, like this.  </p> <pre><code>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') &amp;&amp; model.get('status') === "success" &amp;&amp; model.get('data').length &gt; 0) {                 self.bindTemplate(model.get('data')[0]);             }         });     } }); </code></pre> <p>I have a view set for the page, that takes care of rendering two other views CustomerInfo and CustomerAccounts. The view goes like this.</p> <pre><code>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});     } }); </code></pre> <p>  And CustomerInfo and CustomerAccount views, looks like this,  </p> <pre><code>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}));     } }); </code></pre> <p>  I would like to know if there is any way to know from the <code>myApp.views.CustomerView</code> that the views <code>CustomerInfo</code> and <code>CustomerAccounts</code> has completed its rendering? The main problem I have here is the <code>CustomerInfo</code> view loads quickly but the <code>CustomerAccount</code> view takes some time to load. Hence I need to display the page on one shot, when both the views are ready on DOM.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload