Javascript BackboneJS是否删除背面的旧视图？

我有一个BackboneJS应用程序，它有一个路由器用于两种不同的视图。问题是，如果我从一个视图转到另一个视图，它可以正常工作，但如果我单击浏览器上的“后退”按钮，它只会将一个视图添加到另一个视图的顶部。（因此我最终显示了两种视图）

如何删除视图或强制刷新

  var Schedule = Parse.Object.extend({
    className: "schedule"
  });

  var Movie = Parse.Object.extend({
    className: "movie"
  });

  var ScheduleList = Parse.Collection.extend({
    model: Schedule
  });

  var schedule = new ScheduleList();
  var movie = new Movie();

  var ScheduleView = Parse.View.extend({
    initialize: function() {
          schedule.query = new Parse.Query(Schedule);
          schedule.query.ascending("date");
          schedule.query.limit('500');

          var render = this.render;

      schedule.fetch({
        success: function() {
          render(schedule.toJSON());
        }
      });
    },

    render: function(schedule) {
      console.log(schedule);
      var template = Handlebars.compile($("#schedule-item").html());
      $("#schedule-holder").html(template({shows: schedule}));
      return this;
    }
  });

  var MovieView = Parse.View.extend({
    initialize: function() {
      var query = new Parse.Query(Movie);
      query.equalTo("mId", parseInt(this.id));
      query.limit('1');

      var render = this.render;

      query.first({
        success: function(details) {
          render(details.toJSON());
        }
      });
    },

    render: function(movie) {
      var template = Handlebars.compile($("#movie-item").html());
      $("#movie-holder").html(template(movie));
      return this;
    }
  });

  var AppRouter = Parse.Router.extend({
        routes: {
            "movie/:id": "movieDetails",
            "*actions": "schedule" // Backbone will try match the route above first
        },
        movieDetails: function( id ) {
            // Note the variable in the route definition being passed in here
            var App = new MovieView({ id: id });
        },
        schedule: function( actions ){
            var App = new ScheduleView();
        }
    });

  // Instantiate the router
  var app_router = new AppRouter;

  // Start Backbone history a neccesary step for bookmarkable URL's
  Parse.history.start();

---

我建议创建一个控制器（或使用路由器作为控制器）或主视图来控制此功能

然后，当每个路由被触发时，将新创建的路由传递给所述控制器或主视图

var Controller = Backbone.View.extend({
      el: '#masterdiv'
      showView: function ( view ) {
         this.$el.empty().append( view.el );
      } 
});
var controller = new Controller();
var AppRouter = Parse.Router.extend({
        routes: {
            "movie/:id": "movieDetails",
            "*actions": "schedule" // Backbone will try match the route above first
        },
        movieDetails: function( id ) {
            // Note the variable in the route definition being passed in here
            var view = new MovieView({ id: id });
            controller.showView( view );
        },
        schedule: function( actions ){
            var view = new ScheduleView();
            controller.showView( view );
        }
    });

---

路由器应该跟踪当前视图（如果有），并在添加新视图之前调用旧视图。默认的

remove

非常简单：

删除

查看.删除（）

用于从DOM中删除视图的便利函数。相当于调用

$（view.el）.remove（）

这将清除HTML，并且由于将a绑定到视图的
el
进行事件处理，因此调用
remove
也将防止僵尸UI事件。您可能还希望解除绑定到
remove
中的模型或集合的任何事件处理程序的绑定，否则您可能会在数据事件处理程序中隐藏僵死视图

您可能不希望
remove
要从DOM中删除任何内容，您可能只需要以下内容：

remove: function() {
    this.$el.empty();
    this.undelegateEvents();
    return this;
}

然后视图的
el
将保留在DOM中，但不会引起任何问题

因此，根据需要在视图中添加
remove
实现，并调整路由器以调用
remove
：

var AppRouter = Parse.Router.extend({
    //...
    initialize: function() {
        this.view = null;
    },
    movieDetails: function( id ) {
        this._cleanUp();
        this.view = new MovieView({ id: id });
        //...
    },
    schedule: function( actions ){
        this._cleanUp();
        this.view = new ScheduleView();
        //...
    },
    _cleanUp: function() {
        if(this.view)
            this.view.remove();
        this.view = null;
    }
});

类似的问题感谢您的推荐这是我的第一个backbone.js应用程序，我可以肯定地为它添加更多的模块化。