Chế độ xem làm sạch với backbone.js?

Question

Tôi đang làm việc trên một ứng dụng backbone.js và đã đạt đến điểm mà tôi có một số bộ định tuyến và khung nhìn đại diện cho từng phần của ứng dụng của tôi. Trong ví dụ về bộ định tuyến đơn giản dưới đây, tôi có hai vị trí; account & users.

Cả hai chế độ xem ở mỗi vị trí đều hiển thị nội dung của chúng thành một phần tử tương hỗ, có tên là #appcontainer. Ý thức chung của tôi nói rằng tôi nên đảm bảo rằng mỗi lần xem remove trước khi khởi chạy một chế độ xem khác để ngăn chặn xung đột trong các ràng buộc, DOM và không có gì.

Nhưng vì tôi không thể biết chắc chắn liệu một chế độ xem đã được tạo chưa, tôi không thể gọi rõ ràng previousView.remove() từ bên trong bộ định tuyến hoặc chế độ xem của tôi.

Có đủ để thêm $(this.el).empty() vào hàm tạo của mỗi chế độ xem để xóa mọi ràng buộc và thành phần trước đó khỏi DOM không?

Đây là ví dụ về bộ định tuyến?

var myRouter = Backbone.Router.extend({ 

    routes: { 
     "account": "account", 
     "users": "users" 
    }, 

    account: function() { 
     view = new AccountView({}); 
     view.render(); 
    }, 

    users: function() { 
     view = new UserView({}); 
     view.render(); 
    } 

}); 

Answer 1

Tôi có một thực hiện rất đơn giản, tôi chỉ mới bắt đầu ứng dụng của tôi bây giờ và không biết làm thế nào điều này sẽ giữ lên trong thời gian dài, nhưng có vẻ gì đó như thế này:

Chỉnh sửa: Đây là toàn bộ tệp sẽ trông như thế nào. this.render sẽ là một chức năng khác của myRouter.

var myRouter = Backbone.Router.extend({ 
    routes: { 
     'path/to/account' : 'account', 
     'path/to/users': 'users' 
    } 

    account: function() { 
     view = new AccountView({}); 
     this.render(view); 
    }, 

    users: function() { 
     view = new UserView({}); 
     this.render(view); 
    }, 

    render: function (view) { 
     //Close the current view 
     if (this.currentView) { 
      this.currentView.remove(); 
     } 

     //render the new view 
     view.render(); 

     //Set the current view 
     this.currentView = view; 

     return this; 
    } 
});