2012-03-31 1 views
13

Tôi có một Số lượt xem trang có chứa một vài bài đánh giá trên trang, khi tôi điều hướng đến một trang khác bằng bộ định tuyến, làm cách nào để có thể xóa các chế độ xem hiện tại và tạo các chế độ xem mới cho trang tôi muốn điều hướng?Backbone JS: Làm cách nào để dọn dẹp chế độ xem khi điều hướng đến một url khác?

Ứng dụng này không có mô hình/bộ sưu tập, chỉ xem.

Cảm ơn bạn!

Một phần của mã:

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") 
     }); 
    } 
}); 
+0

Nghe có giải pháp tốt hơn. – user469652

Trả lời

9

Có thể bạn chỉ cần sử dụng cơ chế sự kiện của xương sống để thực hiện việc này nếu bạn muốn.

Bạn chỉ cần tạo bộ định tuyến sự kiện chung và sau đó, mỗi chế độ xem của bạn sẽ nghe sự kiện CloseView. Sau đó, bạn chỉ cần thực hiện tất cả tắt máy khi nhận sự kiện 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. 
    } 
}); 

Sau đó, đó chỉ là trường hợp gọi dispatcher.trigger('OnClose') trong bộ định tuyến của bạn/ở nơi khác để kích hoạt chức năng đóng.

Là lối tắt, giả sử bạn muốn thực hiện việc tắt này trên mọi điều hướng, bạn chỉ có thể đăng ký sự kiện trên bộ định tuyến (hoặc sự kiện 'OnClose' tùy chỉnh tại đây hoặc sự kiện 'tất cả' để chỉ nhận mọi điều hướng) mặc dù bạn sẽ phải cẩn thận rằng các sự kiện được gọi theo thứ tự bạn mong đợi.

Nó cũng có thể có thể tái cấu trúc một số mã này vào Backbone.View.prototype hoặc tương tự, nhưng tôi sẽ để lại điều đó cho người khác làm.

+0

Tôi đã chấp nhận và thích nó ngay bây giờ. – user469652

+0

Tôi có thể hỏi tại sao bạn không làm điều này trên mọi tuyến đường? và tại sao bạn xóa các chế độ xem []? – pushplaybang

+0

cũng xem.stopListening() dường như bây giờ được gọi là autimatically trên view.remove - như vậy là ở trên vẫn còn có liên quan? - các phương thức sự kiện tùy chỉnh có ý nghĩa, nhưng tôi có nên thực hiện các phương thức khác nhau ngay bây giờ không? – pushplaybang

4

tôi lưu trữ phụ quan điểm trong một mảng và khi tôi đóng một "cha mẹ" -Xem, thông qua chức năng của xem close(), lặp qua mảng và đóng phụ lượt xem.

Điều này yêu cầu Subview1 và Subview2 cũng có chức năng 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); 
    } 
}); 
+0

Cảm ơn bạn, bằng cách này, chúng tôi có thể thêm gần() vào Backbone.View.prototype. Tôi hiện đang làm điều này theo cách tương tự, nhưng hãy tìm một giải pháp thanh lịch hơn. – user469652