3

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

2 回答 2

3

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

消除 view.remove()

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

这将清除 HTML，并且由于delegateEvents将 a 绑定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;
    }
});
于 2012-08-29T17:09:44.550 回答
1

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

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

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 );
        }
    });
于 2012-08-29T17:05:12.703 回答