title: how to switch views with the backbone.js router?
body: <p>This is more of a conceptual question, in terms of using the backbone router and rendering views in backbone.</p>
  
  <p>for the sake of an example (what I'm building to learn this with) I've got a basic CRUD app for contacts, with create form, a listing of all contacts, a contact single view and an edit form.</p>
  
  <p>for simplicities sake I'm going to say that I would only want to see one of these things at a time. Obviously showing and hiding them with jQuery would be trivial, but thats not what I'm after.</p>
  
  <p>I have two ideas, </p>
  
  <p>1) trigger custom events from my router that removes all views and sends events that could be listened for in all views (triggering a close method ) and a main App view that then instantiates a specific view - ie :</p>
  
  <pre><code>App.Router = Backbone.Router.extend({
      routes: {
          '' : 'index',
          'addnew' : 'addNew',
          'contacts/:id' : 'singleContact',
          'contacts/:id/edit' : 'editContact'
      },
  
      index: function(){
  
          vent.trigger('contactR:closeAll');
          vent.trigger('contactR:index');
      },
  
      addNew: function() {
  
          vent.trigger('contactR:closeAll');
          vent.trigger('contactR:addNew');
      },
  
      singleContact: function(id) {
  
          vent.trigger('contactR:closeAll');
          vent.trigger('contactR:singleContact', id);
      },
  
      editContact: function(id) {
  
          vent.trigger('contactR:closeAll');
          vent.trigger('contactR:editContact', id);
      },
  
  });
  </code></pre>
  
  <p>(nb : vent is extending the backbone events obj so I can pub / sub )</p>
  
  <p>2) or would / could / should I send a close all event and create an instance of the view in the router ?</p>
  
  <p>Note I'm looking to achieve this without delving into additional libraries or frameworks like marionette etc.</p>