javascript - Backbone View render: fetch-first versus render-first, both approaches have faults? -


this more of conceptual/architectural question anything; typical/popular approach constructing , instantiating backbone views seems to render view after fetching necessary model/collection data server (in success() or done() callback).

this , good, if have sort of loading indicator or ui element within view's template needs displayed before/during fetch? not rendering view until call finishes, unable display such notifications user.

conversely, if render view before making fetch, you're able display such ui elements, run risk of displaying mostly-empty template, since model/collection data hasn't been retrieved yet, , can rather weird.

what if need both things: ui notifications before/during fetch, , not render mostly-empty template pre-fetch? might approaches towards accomplishing goal?

i use separate loading view handle loading gif listens relevant events trigger model/collection fetching results. view responsible rendering without being concerned loading gif. loading gif obscures results "revealed" when loading gif removed:

var myview = backbone.view.extend({      initialize: function () {          this.listento(this.collection, 'reset', this.render);     },      render: function () {         // whatever need here     } });  var loadingview = backbone.view.extend({      el: '#loading',      initialize: function () {          this.listento(this.collection, 'fetchstarted', this.showloader);         this.listento(this.collection, 'fetchfinished', this.hideloader);     },      showloader: function () {          var self = this;          if (this.waithandle) {             cleartimeout(this.waithandle);             delete this.waithandle;         }         this.waithandle = settimeout(function () {              self.$el.removeclass('hide');         }, 300);      },       hideloader: function () {           cleartimeout(this.waithandle);          delete waithandle;          this.$el.addclass('hide');     } });  var mycollection = backbone.collection.extend({       getresults: function () {           var self = this;           this.fetch({              beforesend: function () {                  self.trigger('fetchstarted');              },              complete: function () {                  self.trigger('fetchfinished');              }           });       } }); 

i use timeouts in loading view delay showing loading gif in case aren't necessary.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -