如何重置 Backbone 中的所有事件

Question

我想重新启动 Backbone 中的所有 JQuery 事件。问题是这样的：当您转到特定视图时，我有以下事件：

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

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

当您返回上一个视图时，我已经进入当前状态并再次返回当前并使用该事件，它已经运行了 2 次，如果您以另一种方式进行相同的练习，它会开始运行 3 次成长。我该如何处理这个问题并打开每次重置事件？

还要提一下使用 Requirejs。这是我的路由器 .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
  };
});

解决方案： 我决定我的问题如下：我创建了close方法，其内容如下：

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

另外，这就是我的 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;
    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
  };
});

Answer 1

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();

检查这个article，可能还有其他原因导致视图仍然存在

编辑 这与我在应用程序中所做的几乎相同
确保在所有视图中添加关闭功能作为属性

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