BackboneJS移除舊視圖？

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