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.

Rida BENHAMMANE · Accepted Answer · 2014-03-04T22:30:11.670

9

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

edited Mar 04 '14 at 22:30

answered Mar 04 '14 at 22:09

Rida BENHAMMANE

4,111
1
14
25

Hey Rida, thanks but where does this fit in in light of what I've asked and where would I put it? - could you explain this function a little more and how i would use it in light of my app example please ? – bigmadwolf Mar 04 '14 at 22:23
thanks again Rida, can I ask you to explain the conditional - where does the cid prop come from ? I think I understand the concept now, you're saying I should create a new instance of the view related to the appropriate route, and remove the old view if their is one -- is there a reason you would suggest handling view instances/rendering here rather than in an overall app view ? is it just the 'right way' to do it ? – bigmadwolf Mar 04 '14 at 22:54
1

the `cid` is a unique id generated by Backbone for each view instance. `Backbone.Router provides methods for routing client-side pages` take a look a the doc http://backbonejs.org/#Router, if you handle the view instances/rendering in an overall app view you will break the MVC pattern, you will have a V (view) taking the role of the C (controller). – Rida BENHAMMANE Mar 04 '14 at 23:16
in thinking about it, it does seem like a needless level of abstraction to publish events from the router to trigger views now that you've explained it. – bigmadwolf Mar 04 '14 at 23:45

how to switch views with the backbone.js router?

1 Answers1

Linked

Related