骨干JS：如何清理导航到另一个网址时的意见？

Question

我有一个包含页面上的几个子视图的Homeview，当我使用路由器导航到另一个页面时，如何清理现有视图并为我想导航到的页面构建新视图？

此应用没有模型/集合，只是视图。

谢谢！代码的

部分：

Home = Backbone.View.extend({ 
    template: "static/js/templates/home.html", 

    initialize: function() { 
     _.bindAll(this); 
     this.render(); 
    }, 

    render: function() { 
     var view = this; 

     // Fetch the template, render it to the View element and call done. 
     namespace.fetchTemplate(this.template, function(tmpl) { 
     view.el.innerHTML=tmpl(); 
     view.subRender(); 
     }); 

     return this; 
    }, 
    subRender: function() { 
     var view = this; 
     var videoView = new Subview1({ 
     el: $('#wrapper1'), 
     homeView: view 
     }); 
     var timeView = new Subview2({ 
     el: $("#wrapper2") 
     }); 
    } 
}); 

Answer 1

如果您愿意，您可以使用backbone的事件机制来完成此操作。

你只需要创建一个全局事件路由器，然后让每个视图监听CloseView事件。然后，您只需在收到CloseView事件时执行所有关机操作。

var dispatcher = _.clone(Backbone.Events) 

Home = Backbone.View.extend({ 
    ... 
    initialize: function() { 
     ... 
     dispatcher.on('CloseView', this.close, this); 
    } 
    close: function() { 
     // Unregister for event to stop memory leak 
     dispatcher.off('CloseView', this.close, this); 
     this.remove(); 
     this.unbind(); 
     this.views = []; // Clear the view array 
    } 
    ... 
}); 

SubView = Backbone.View.extend({ 
    ... 
    initialize: function() { 
     ... 
     dispatcher.on('CloseView', this.close, this); 
    } 
    close: function() { 
     // Unregister for event to stop memory leak 
     dispatcher.off('CloseView', this.close, this); 
     // Do other close stuff here. 
    } 
}); 

然后，它只是在你的路由器/其他地方调用dispatcher.trigger('OnClose')触发关闭功能的情况。

作为一个快捷方式，假设您想要在每个导航上执行此关闭操作，您可以在路由器上注册事件（可以是定制的'OnClose'事件或'all'事件以获取每个导航），但你必须小心，按照你期望的顺序调用事件。

也可能将这些代码的一些重构成Backbone.View.prototype或类似的，但我会留给别人去做。

Answer 2

我存储在数组中的子视图和当我关闭“父” - 视图，通过视图的close()功能，迭代阵列上并关闭所述子观点。

这要求Subview1和Subview2也有close()函数。

Home = Backbone.View.extend({ 
    template: "static/js/templates/home.html", 

    initialize: function() { 
     _.bindAll(this); 
     this.render(); 
     // Hold sub views 
     this.views = []; 
    }, 
    close: function() { 
     this.remove(); 
     this.unbind(); 
     this.clear_views(); 
    }, 
    clear_views: function() { 
     while this.views.length > 0 
     this.views[0].close() 
     this.views.splice(0, 1) 
    }, 
    render: function() { 
     var view = this; 

     // Fetch the template, render it to the View element and call done. 
     namespace.fetchTemplate(this.template, function(tmpl) { 
     view.el.innerHTML=tmpl(); 
     view.subRender(); 
     }); 

     return this; 
    }, 
    subRender: function() { 
     var view = this; 
     var videoView = new Subview1({ 
     el: $('#wrapper1'), 
     homeView: view 
     }); 
     this.views.push(videoView); 
     var timeView = new Subview2({ 
     el: $("#wrapper2") 
     }); 
     this.views.push(timeView); 
    } 
});