Backbone View: function executes several times

Question

Am running an backbone script in which I can go back and forward between views. Using next and previous buttons with a simple router navigate script in it.

In the view of step 1 I use this script to go to the next page:

nextStep: function() {

    //get referrerTypes
    OF.getReferrerTypes();
    OF.getClinics();

    OF.router.navigate('step/2', {trigger: true});

}

Now here is my problem. When I navigate to step/2 and go back to step/1 (also router.navigate) somehow the functions in step/1 are loaded twice.

So when I go the step/2 for the second time the function it runs the nextStep function twice. Or when I go back and forward for a second time it would run the nextStep functio thrice.

I tried to fix this by doing a step1view.remove in the router. I even did a remove. However this doesn't help at all.

Here is the script in the router which loads the view

goToStep1: function() {
    require(['./models/step1Model', './views/step1View'],function(Step1Model, Step1View) {
        if (step1View) {
            step1View.remove();
            delete step1View;
        }

        step1View = new Step1View;
        step1View.render();

    });

}

Can anybody help out here? I really need to run the functions only once.

Thanks in advance!

Answer 1

Try to undelegate events :

step1View.remove();
step1View.undelegateEvents();