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