beforeRender

baseRouterUsage.js

BaseRouter.extend({
  'portfolio': new PortfolioRoute(),

  // or the old way...
  'home’: 'home'',
  'login': loginFunction,
});

baseRouteUsage.js

var PortfolioRoute = BaseRoute.extend({
  prepare: function() {
    this.promise = …;
    return this.promise;
  },
  render: function() { … },
  error: function() { … }
});

beforeRender.js

beforeRender: function() {
  this.model = new Account();
  return this.model.fetch();
}

preloadStart.js

onRender: function() {
  this.preloadStart();
  this.loadSomeDataWeNeed().then(this.preloadComplete);
},

loadSomeDataWeNeed: function() {
  this.account = new Account();
  return this.account.fetch();
},

preloadStart: function() {
  // hide $el and show loading indicator
},

preloadComplete: function() {
  // show $el and hide loading indicator
}