在路线变更时销毁骨干视图

Question

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

因此，在此示意图示例中，应在用户输入凭据后销毁登录视图：

我尝试使用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/

离开路线位置后是否有破坏视图的解决方案？

我是否需要hack a new event进入Backbone.js？

Answer 1

我用来做一个App.current变量指向正在渲染的当前视图。

在每条路线的顶部（或您的相关路线），我从App.current移除当前视图，然后为其分配新视图：

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

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

这样我每条路线只能放一个视图，摆脱像你这样的问题。

如果您不想检查App.current并在每条路径的顶部调用remove方法，您可以监听Backbone.history路由事件并在那里注入该逻辑：

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

Answer 2

我认为你坚持你的黑客，除非你能适应.listenTo以满足你的需求 - 然后你需要在路线改变的任何地方用.trigger发射自定义事件，这可能是不可能的。请注意，在骨干之前已经请求（并拒绝）此功能：

https://github.com/documentcloud/backbone/pull/494

请参阅针对尝试执行相同操作的其他修补程序的拉取请求。

Answer 3

在这里，我们使用on和off来监听路由事件而不是once，因为我们不能依赖单个事件不是< / em>当前路线。当我们收到一条路线时，即使不是我们当前的路线，我们也可以销毁视图并移除听众：

  // Destroy view
  var self = this;
  var onRoute = function(route, params){
    if(route !== 'sample'){
      demoView.remove();
      self.off('route', onRoute);
    }
  };
  this.on('route', onRoute);

我在这里修改了你的测试小提琴：http://jsfiddle.net/rgthree/hcuX9/3/

---

另一个选项，作为您的小提琴（不在您的问题中）直接导航到另一个视图。这会导致其他路径的事件在 sample2路径之后触发。因此，上面将删除视图。现在，它更加完整。您可以处理它的一种更为简单的方法是简单地将once推迟到setTimeout中，以便在当前路由被触发之后才会侦听：

// Destroy view
var self = this;
setTimeout(function(){        
  self.once('route', function(){
    demoView.remove(); 
  });
}, 0);

你可以在这里看到你的小提琴：http://jsfiddle.net/rgthree/hcuX9/4/