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，可能还有其他原因导致视图仍然存在

修改这几乎与我在我的应用程序中所做的相同。确保在所有视图中添加close函数作为属性

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

如何重置Backbone中的所有事件

1 个答案: