how to switch views with the backbone.js router?

Question

This is more of a conceptual question, in terms of using the backbone router and rendering views in backbone.

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.

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.

I have two ideas,

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 :

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);
    },

});

(nb : vent is extending the backbone events obj so I can pub / sub )

2) or would / could / should I send a close all event and create an instance of the view in the router ?

Note I'm looking to achieve this without delving into additional libraries or frameworks like marionette etc.

Answer 1

You can use an utility object like this :

var ViewManager = {
    currentView : null,
    showView : function(view) {
        if (this.currentView !== null && this.currentView.cid != view.cid) {
            this.currentView.remove();
        }
        this.currentView = view;
        return view.render();
    }
}

and whenever you want to show a view use ViewManager.showView(yourView)

App.Router = Backbone.Router.extend({
    routes: {
        '' : 'index',
        'addnew' : 'addNew',
        'contacts/:id' : 'singleContact',
        'contacts/:id/edit' : 'editContact'
    },

    index: function(){
        var indexView ...
        ViewManager.showView(indexView);
    },

    addNew: function() {
        var addNewView ...
        ViewManager.showView(addNewView);
    },

    singleContact: function(id) {
        var singleContactView ...
        ViewManager.showView(singleContactView);
    },

    editContact: function(id) {
        var editContactView ...
        ViewManager.showView(editContactView);
    },

});

So it's the ViewManager that's responsible of rendering your views