Question

我有一个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();

Answer 1

您的路由器应该跟踪当前视图（如果有）并在添加新视图之前调用旧视图上的remove。默认remove非常简单：

删除 view.remove()

从DOM中删除视图的便捷功能。相当于调用$(view.el).remove();。

这将清除HTML，并且由于delegateEvents将delegate绑定到视图的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;
    }
});

Answer 2

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

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

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

BackboneJS删除旧视图？

2 个答案: