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 fetch
ing 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
Post a Comment