javascript - 在路由更改时销毁 Backbone View

Question

离开当前路线位置后，我的 View 应该被销毁。

所以在这个示意图示例中，登录 View 应该在用户输入他的凭据后销毁:

我试图通过使用 Backbone.Router 事件来解决这个问题:

var Router = Backbone.Router.extend({
    initialize: function () {
        Backbone.history.start();
    },
    routes: {
        "sample" : "sample"
    },
    sample: function(){
      // Build view
      var demoView = $("<div/>")
          .appendTo(document.body)  
          .text("I am lost!");

      // Destroy view
      this.once('route', function(){
        demoView.remove(); 
      });
    },
});

不幸的是，这不起作用，因为路由事件在路由执行后引发:

http://jsfiddle.net/hcuX9/

有没有离开路线位置后破坏views的解决方案？

我必须 hack a new event进入 Backbone.js？

Answer 1

我用来做的是让一个 App.current 变量指向正在呈现的当前 View 。

在每条路线(或您的情况下的相关路线)的顶部，我从 App.current 中删除当前 View ，然后为其分配新 View :

someRoute: function() {
  if(App.current && App.current.remove) App.current.remove();  

  // Asign a new current page
  App.current = new SomeView();
  ...
}

这样一来，我只让每条路线有一个 View ，从而消除了像您这样的问题。

如果您不喜欢检查 App.current 并在每个路由顶部调用 remove 方法，您可以监听 Backbone.history 路由事件并在那里注入(inject)该逻辑:

Backbone.history.on('route', function() {
  if(App.current && App.current.remove) App.current.remove();  
});