Question

Sorry, the title is a little confusing.

My backbone router has the following structure:

var AppRouter = Backbone.Router.extend({
    routes: {
      'notes': 'showNotes',
      'news': 'showNews'
    },
    showNews: function() {
        // make view object and render
    },
    showNotes: function() {
        // make view object and render
    },
    initialize: function() {
        this.user.fetch({success: function(){
            // callback function
        }});
    }
});

The issue I am having is that i need to pass the user into the views, so i need each render to only run if the success callback runs inside of initialize. Basically I don’t want initialize to finish until the callback is called. I cant figure out how I could achieve this.

Thanks

Answer 1

Router#initialize, by default, is an empty function. At the point it’s run, the routes have already been handed off to History, and you’re probably past any “clean” way to prevent them.

If you really need to ensure that your user is fetched before the router starts rendering, you could achieve that by fetching the user before the history begins, something like this:

  // in some initializer:
  user.fetch({success: function() {
    var router = new AppRouter({user: user});
    Backbone.history.start();
  }});

  // and your router:
  initialize: function(options) {
    if (options) this.user = options.user;
  }

But it may also make sense to have the view respond to the user being fetched, rather than ensuring that it’s loaded beforehand. The view might simply render nothing until the user loads, or it might show a “loading” graphic, etc. In which case you’d just:

// in your router
showNotes: function() {
  // note sure how you're storing your views, but for example:
  this.currentView = new ShowNotesView({model: this.user}).render();
},

initialize: function() {
  this.user.fetch();
}

// and in the view
initialize: function() {
  this.model.on('sync', this.render.bind(this));
},

render: function() {
  // note that `hasBeenSynced` is a made up property.  Fill it in with something
  // that indicates the model has been fetched successfully.  Alternatively you
  // might do this in the template.  Lot of flexibility here.
  if (this.model.hasBeenSynced) {
    // render the model
  } else {
    // show nothing, a loading template, etc
  }
  return this;
}