Backbone.marionnette - 이벤트 다시 바인딩 대 새로운보기 생성

Question

나는 여러 개의 탭이있는 Layout을 가지고 있습니다. 이 탭 중 하나를 클릭하면 show 페이지 콘텐츠의 적절한 합성보기 region이됩니다. 서로 다른 탭 사이를왔다 갔다하면서 합성보기가 컬렉션 재설정 및 모델 변경시 렌더링하기 위해 기본 바인딩을 잃어버린 것으로 나타났습니다.

두 번째로보기를 표시 할 때 _initialEvents 복합보기에서 사용중인 이벤트를 리 바인드해야하는 방법이 있습니까? 아니면 모든 복합보기를 show 탭으로 만들어야합니까?

현재 내 Layout의 내 모든보기를 initialize에 작성한 다음 탭을 클릭하면보기와 함께 show을 사용합니다.

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

이것은 나에게 가장 좋은 접근 방식 같지 않습니다.

레이아웃의 지역 관리자를 사용하여 정의한 기능이 필요없는보기를 표시해야합니다.

내가 나중에 다음이 방법

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

갈 것입니다 : 당신은 당신이에있는 길을 계속하려면

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

하면 그때는 아마이 방법을 사용하는 것이 가장 좋은 것입니다 :

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

의미가 있습니까?

이 문제에 대해 더 많은 구조를 보지 않고도 최선의 행동 방침을 제시하는 것은 어렵습니다.

initialize에보기를 만드는 이유가 있습니까?

Answer 2

Marionette (v.1) onword는 Backbone.BabySitter를 사용하여 하위보기를 관리합니다.

당신도 마찬가지입니다. 모든 탭보기를 저장하는 보관함을 만드십시오. 나중에 컨테이너에 조회해야하는보기를 리턴하도록 조회하십시오.

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

레이아웃보기가 성공적으로 컨테이너에있는 모든보기를 닫습니다 나중에 단지 가까운 방법이

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

을보기를 보여

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

Answer 3

당신은 레이아웃을 만들 필요가 없습니다 DON/탭에서 탭으로 전환 할 때마다 아이템/컴포지트/콜렉션보기를 사용합니다. 반대로 수행중인 방식으로 내용을 저장할 수 있습니다. 문제는 변수가 다시 선언 된 것입니다. e 콘텐츠를 렌더링 할 시간. 해결책은 뷰에 변수를 추가하지 않으면 변수 (this.places_page)가 선언되었는지 확인해야하므로 더 이상 호출해도 문제없이 동일한 레이아웃 뷰를 유지할 수 있습니다. (영역을 보유하고있는) 메인 뷰를 렌더링하면 (영역 내의) 중첩 된 자식 뷰는 새로운 뷰가 생길 때까지 손실됩니다.

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

초기화 중에 모든보기를 만들면 안됩니다. 메모리 누수가 발생하므로 동적으로보기를 만들어야합니다. 또한 코드 재사용 가능성을 높이기 위해 콘텐츠 영역에서보기를 표시하는 공통 기능을 만드는 것이 좋습니다.

//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. 
}