How do I reset all events in the Backbone

Question

I want to restart all JQuery events in Backbone. The problem is this: when you go to the particular view I have the following event:

el: $('#content'),
    events : {
        'click #stops-drop-down' : 'stopDropDown',
    },

stopDropDown: function(ui){
        console.log("Event");
        $("#stops-drop-down").toggleClass("focus-box");
        $("#stops-list").slideToggle();
    }

When you return to the previous view from which I've come to current and again go back to current and use the event, it is already running 2 times, if you do the same exercise another way it 3 times and it begins to grow. How can I deal with this problem and open the reset each time events?

Also to mention that use Requirejs. Here's what it looks like my router .js

define([
  'jquery',
  'underscore',
  'backbone',
  'views/home/home',
  'views/line/line',
], function($, _, Backbone, HomeView, LineView){
  var AppRouter = Backbone.Router.extend({
    routes: {
      '': 'homePage',
      'line/:line/:type_transport': 'lineDetails',
      '*action': 'errPage'
    }
  });

  var initialize = function(){
    var self = this;
    var app_router = new AppRouter;

    app_router.on('route:homePage', function() {
      var homeView = new HomeView();
    });

    app_router.on('route:lineDetails', function(line, typeTransport) {
      var lineDetailsView = new LineView();
      lineDetailsView.render(line, typeTransport);
    })

    app_router.on('route:errPage', function() {
      alert("Err Page");
    });

    Backbone.history.start();
  };
  return {
    initialize: initialize
  };
});

SOLUTION: I decided my problem as follows: I created the close method, which has the following content:

close: function(){
        this.undelegateEvents();
        $(this).empty;
        this.unbind(); 
    },

Also, here's how it seems my router.js now:

define([
  'jquery',
  'underscore',
  'backbone',
  'views/home/home',
  'views/line/line',
], function($, _, Backbone, HomeView, LineView){
  var AppRouter = Backbone.Router.extend({
    routes: {
      '': 'homePage',
      'line/:line/:type_transport': 'lineDetails',
      '*action': 'errPage'
    }
  });

  var initialize = function(){
    var self = this;
    var app_router = new AppRouter;
    var lineDetailsView;
    var homeView ;

    app_router.on('route:homePage', function() {
        if(homeView) {
          homeView.close();
        }
        homeView = new HomeView();
    });

    app_router.on('route:lineDetails', function(line, typeTransport) {
      if(lineDetailsView){
        lineDetailsView.close();
      }
      lineDetailsView = new LineView();
      lineDetailsView.render(line, typeTransport);
    })

    app_router.on('route:errPage', function() {
      alert("Err Page");
    });

    Backbone.history.start();
  };
  return {
    initialize: initialize
  };
});

StateLess · Answer 1 · 2014-09-16T07:33:00.753

var YourView = Backbone.View.extend({
el: $('#content'),
    events : {
        'click #stops-drop-down' : 'stopDropDown',
    },
close : function(){
    this.remove(); // removes view from  dom
    this.unbind(); // unbinds all the events associated with the view  
},
stopDropDown: function(ui){
        console.log("Event");
        $("#stops-drop-down").toggleClass("focus-box");
        $("#stops-list").slideToggle();
    }
});
// check if view already exists before creating new instance
// if exists call close on that view -- and then create your new view
if(yourView)
yourView.close();

yourview = new YourView();

check this article , there may be other reasons for the view to still exist

EDIT this is almost the same way i have done in my application
make sure you add close function as property in all views

define([
  'jquery',
  'underscore',
  'backbone',
  'views/home/home',
  'views/line/line',
], function($, _, Backbone, HomeView, LineView){
  var AppRouter = Backbone.Router.extend({
    routes: {
      '': 'homePage',
      'line/:line/:type_transport': 'lineDetails',
      '*action': 'errPage'
    }
  });

  var initialize = function(){
    var self = this;
    var app_router = new AppRouter;

    app_router.on('route:homePage', function() {
      if(homeView)
         homeView.close();

      var homeView = new HomeView();
    });

    app_router.on('route:lineDetails', function(line, typeTransport) {
      if(lineDetailsView)
        lineDetailsView.close();

      var lineDetailsView = new LineView();
      lineDetailsView.render(line, typeTransport);
    })

    app_router.on('route:errPage', function() {
      alert("Err Page");
    });

    Backbone.history.start();
  };
  return {
    initialize: initialize
  };
});

Yes you are right, most likely, but I didn't mention something that most probably would change things. Please take a look at the version in question (edit) — Krasimir, Sep 16 '14 at 07:27
it should be undefined first time , but it should'nt be for second time as the views instance is assigned to it , right? — StateLess, Sep 16 '14 at 07:43
I used the example of `close` which you have offered, but then when you need to display the view, it does not appear, however, that all the methods are invoked on the view. — Krasimir, Sep 16 '14 at 08:15

How do I reset all events in the Backbone

1 Answers1