Backbone.marionnette - Rebinding sự kiện vs tạo chế độ xem mới

Question

Tôi có một số Layout có nhiều tab. Nhấp vào một trong các tab này sẽ show chế độ xem tổng hợp thích hợp trong nội dung của trang region. Sau khi điều hướng qua lại giữa các tab khác nhau, tôi nhận thấy rằng các chế độ xem tổng hợp đã mất các liên kết gốc của chúng để hiển thị khi đặt lại bộ sưu tập và thay đổi mô hình.

Có cách nào tôi nên khôi phục sự kiện đang được sử dụng trong _initialEvents của chế độ xem tổng hợp khi hiển thị chế độ xem lần thứ hai hay tôi nên tạo chế độ xem tổng hợp mới mỗi tab show?

Hiện tại tôi đang tạo tất cả các chế độ xem của mình trong initialize trong số Layout và sau đó sử dụng show với chế độ xem khi một tab được nhấp.

initialize: function(){ 
    _.bindAll(this); 

    //  Tabs 
    this.places_page = new Places_Layout(); 
}, 

show_places_page: function(){ 

    this.content.show(this.places_page); 
    this.places_page.delegateEvents(); 
}, 

Answer 1

Điều này nghe không giống như cách tiếp cận tốt nhất với tôi.

Bạn nên sử dụng trình quản lý vùng của bố cục để hiển thị số lượt xem mà không cần các chức năng như bạn đã xác định.

tôi sẽ đi cho cách tiếp cận này

var view = new CustomView(); 
layout.content.show(view);` 

sau đó vào lúc:

var newView = new SecondCustomView(); 
layout.content.show(newView); 

Nếu bạn muốn tiếp tục xuống đường mà bạn đang ở trên thì bạn có lẽ là tốt nhất để sử dụng phương pháp này :

initialize: function() { 
    _.bindAll(this); 
}, 
show_places_page: function() { 
    var placesLayout = new Places_Layout(); 
    this.content.show(placesLayout); 
} 

Điều đó có hợp lý không?

Thật khó để đề xuất hành động tốt nhất mà không thấy nhiều cấu trúc xung quanh vấn đề này.

Có lý do nào khiến bạn đang tạo chế độ xem trong initialize không?

Answer 2

Tiện ích con (v.1) sử dụng Backbone.BabySitter để quản lý chế độ xem con.

Trong trường hợp của bạn, bạn cũng vậy. Chỉ cần tạo một containter để lưu trữ tất cả xem tab. Sau đó truy vấn vùng chứa để trả lại chế độ xem bạn cần hiển thị.

this.tabViewsContainer = new Backbone.ChildViewContainer(); 
this.tabViewContainer.add(new CustomView(),'tab1'); 
this.tabViewContainer.add(new SecondCustomView(),'tab2'); 

Để sau này cho thấy quan điểm chỉ làm điều này

var custv = container.findByCustom("tab1"); 
this.content.show(custv); 

Trong phương pháp chặt chẽ xem bố trí của bạn đóng thành công tất cả nhìn vào bình chứa

this.tabViewsContainer.each(function(view){view.close()}); 

Answer 3

Bạn don không phải tạo một Layout/Khung nhìn Item/Composite/Collection mỗi khi bạn chuyển từ tab này sang tab khác, ngược lại bạn có thể lưu nội dung trong một biến chỉ theo cách bạn đang làm, vấn đề bạn có là biến đang được khai báo lại e thời gian bạn muốn hiển thị nội dung. Giải pháp là bạn phải xác minh xem biến đó (this.places_page) được khai báo nếu không thêm biến đó vào chế độ xem sao cho khi bạn gọi nó nhiều lần, nó sẽ giữ cùng một bố cục mà không gặp bất kỳ sự cố nào, chỉ cần lưu ý rằng khi bạn làm cho khung nhìn chính (cái đang giữ các vùng) các khung nhìn con lồng nhau (trong các vùng) sẽ bị mất cho đến khi tiết kiệm mới thông qua chúng.

initialize: function(){ 
    _.bindAll(this); 

    // You can asign a diferent variable for each view so when you call show_places_page it will render with the same view. 

    if (!this.places_page){ 
     this.places_page = new Places_Layout(); 
    } 

    // other tab   
    if (!this.other_page){ 
     this.other_page = new OtherPage_Layout(); 
    } 

}, 

show_places_page: function(){ 

    this.content.show(this.places_page); 
    this.places_page.delegateEvents(); 
}, 

Answer 4

Bạn không nên tạo ra tất cả các quan điểm bên trong khởi tạo vì điều này sẽ làm cho quý vị rò rỉ bộ nhớ đó là lý do tại sao bạn nên làm sáng tạo năng động của quan điểm. Ngoài ra, tôi khuyên bạn nên tạo một hàm phổ biến để hiển thị chế độ xem trong khu vực nội dung của bạn để tăng khả năng sử dụng lại mã. Tôi sẽ đề nghị bạn một cái gì đó giống như giải pháp sau đây:

//define the regions of your layout view 
regions: { 
    content: '#content' 
}, 
//Maintain a config for the tab content view classes. 
contentViews: { 
    tab1: Tab1View, 
    tab2: Tab2View, 
    tab3: Tab3View 
}, 
//keeps all the view instances 
viewInstances: {}, 
/* 
* show tab function is called when you click a tab item. 
* Consider each tab has a attribute for tab name. 
* For example HTML of your one tab is like: 
* <div data-tab-name="tab_name">Tab <tab_name></div> 
*/ 
showTab: function (e) { 
    var tabName = $(e.currentTarget).attr("data-tab-name"); 
    /* 
    * code for showing selected tab goes here... 
    */ 

    //check and create the instance for the content view 
    if (!this.viewInstances[tabName]) { 
     this.viewInstances[tabName] = new this.contentViews[tabName](); 
    } 
    //Then here you are actually showing the content view 
    this.content.show(this.viewInstances[tabName]); 
    this.viewInstances[tabName].delegateEvents(); //this is to rebind events to the view. 
}