How to clean views and models in Backbonejs

Question

    movieDb.Router  = Backbone.Router.extend({
        routes:{
            '':         'landPage',
            'home':     'landPage',
            'login':    'login',
            'signup':   'signup'
        },

        landPage: function(p){
            $('div#homepage').empty();
        },

        login:  function(p){
            new loginViews(); // Calls its own model                
        },

        signup: function(p){
            new signupViews(); // Calls its own model
        }
    });

The problem is when coming from signup and calling login, it also calls the previous model requests(signup) resulting to login and signup request at the same time(my models are ajax requests), how can I remove the previously called models everytime I create a new request in my views.

Thanks.

score 1 · Answer 1 · answered Jul 11 '12 at 05:22

1

The easiest way that i have found is to use Backbone.Marionette https://github.com/derickbailey/backbone.marionette which allows you to use separate regions for separate functions.
If you dont want to have another dependancy you can do that manually : http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

but if you are seeing that a fetch on one model is calling a fetch on another then you probably have either a collision in names, or somehow a chaining of events that is causing the second fetch.

answered Jul 11 '12 at 05:22

MarkKGreenway

8,494
5
34
53

but in this case, i cannot call a model without call the specific views(loginViews,signupViews) so removing/cleaning the view will actually prevent calls to that views' model, I already checked the last link you gave me, and I find it a bit complicated for a beginner like me. – Barry Jul 11 '12 at 05:37
why not signup: function(p){ window.signupModel = new SignupModel(); new signupViews({model : window.signupModel}); } – MarkKGreenway Jul 11 '12 at 05:43
that's not different from my implementation, only that I call the model in views not from the router, so it doesn't solve it, thanks anyway – Barry Jul 11 '12 at 05:53
with the window.signupModel you can easily then delete it when you do not need it like in the login route – MarkKGreenway Jul 11 '12 at 05:57

score 0 · Answer 2 · answered Jul 19 '12 at 02:06

I just want to share how I solved this problem.(very basic approach, not sure if this is the best practice but it worked)

I extended the view with close function

    Backbone.View.prototype.close = function () {
        this.unbind();
        this.undelegateEvents();
    };

And created a showView function in my router to be called everytime I fire an event in my view.

    showView: function (view) {
        //destroy current view
        if(this.currentView !== undefined) {
            this.currentView.close();
        }

        //create new view
        this.currentView = view;
        this.currentView.delegateEvents();

        return this.currentView;
     }

Then call that showView function in my view

     addMovie:   function(p){
        this.showView(this.movieForm('add'));               
    }

How to clean views and models in Backbonejs

2 Answers2