javascript - BackboneJS 删除背面的旧 View ？

Question

我有一个 BackboneJS 应用程序，它有一个用于两个不同 View 的路由器。问题是，如果我从一个 View 转到另一个 View ，它工作正常，但如果我单击浏览器上的后退按钮，它只会将一个 View 添加到另一个 View 之上。 (所以我最终显示了两个 View )。

如何删除 View 或强制刷新？

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

Answer 1

您的路由器应跟踪当前 View (如果有)并调用 remove在添加新 View 之前在旧 View 上。默认的 remove 非常简单:

remove view.remove()

Convenience function for removing the view from the DOM. Equivalent to calling $(view.el).remove();.

这将清除 HTML，因为 delegateEvents绑定(bind) delegate到 View 的 el 进行事件处理，调用 remove 也将防止僵尸 UI 事件。您可能还想在 remove 中取消绑定(bind)已绑定(bind)到模型或集合的任何事件处理程序，否则您可能会在数据事件处理程序中隐藏僵尸 View 。

你可能不希望 remove 从 DOM 中删除任何东西，你可能只想要这样的东西:

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

然后 View 的 el 将保留在 DOM 中，但不会造成任何问题。

因此，根据需要在您的 View 中添加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;
    }
});