Question

If I created a standard webapp with 3 different “states”: index, view, edit, would I create a single controller that had 3 different routes?

Assume the index has 4 Backbone.Views associated with it and edit has 3. If one navigates from index to edit: is it standard to change the appearance of the page by simply removing all the index Backbone.Views and rendering the edit ones? That seems like a lot of work – would it be wise to just toggle “display:none” when moving between modes? If so would that functionality be within the Controller’s functions?

For instance would the following be a valid way of doing it?

window.MyController = Backbone.Controller.extend({
  routes: {
    '#index':index,
    '#view/:id':view,
    '#edit/:id':edit
  },

  switchState: function(state){
    hideStates();
    showState(state);
   },

  index: function(){
    switchState(index)
  },

  view: function(id){
    switchState('view')
  },

  edit: function(id){
    switchState('edit')
  }
})

Answer 1

That’s exactly what you should do. Re-rendering on is a bad idea, because you would have to remember states (ie. user typed something into a field in edit tab, then switched to index – when he’s back to edit, the field would be empty). It’s also faster to base navigation on simply hiding&showing appropriate layers.