가변 개수의 뷰를 수용 할 수있는 레이아웃 만들기

Question

내 목표 다양한 뷰를 수신 할 수있는 사용자 레이아웃 (플로우 레이아웃)을 만들어야합니다. 영역을 필요에 따라 배치하고 전달되는 뷰를 표시하는 영역 내에서 뷰를 세로 또는 가로로 배열 할 수 있습니다.

요구 사항 레이아웃에는 초기에 영역이 정의되지 않은 템플릿이 있습니다. 추가 된 영역이 렌더링되는 래퍼 (data-role="region-wrapper") 만 포함합니다.

내 접근 방식.

1 -

2 Marionette.Layout (분명히)를 확장 - 다음

constructor: function(options) { 
    // call super here... 

    this.viewList= options.viewList || []; 

    this._defineRegions(); // see 3 
}    

3처럼 생성자 Ovveride - 동적

_defineRegions: function() { 

    _.each(this.viewList, function(view, index) {    
    var name = 'flowRegion_' + index; 
    var definition = { selector: "[data-region='flow-region-" + index + "']" };    
    this.addRegion(name, definition); 

    }, this); 
}, 

4 영역을 정의 - 영역 및 뷰를 렌더링 동일한 레이아웃 내의 onRender 메서드에서

onRender: function() { 

    _.each(this.viewList, function(view, index) { 
     // if the view has not been instantiated, instantiate it 

     // a region is a simple div element 
     var $regionEl = // creating a region element here based on the index 

     // append the region here 
     this.$el.find("[data-role='flow-wrapper']").append($regionEl); 

     var region = this.getRegion(index); // grab the correct region from this.regionManager 
     region.show(view);    
    }, this); 
} 

이 해결책은 효과가있는 것 같지만 유효한지 따라야하는지 알고 싶습니다. 따를 수있는 다른 접근법은 무엇입니까?

Answer 1

어쩌면 나는 완전히 따라하지 못했지만이 경우에는 collectionView를 사용할 수없는 이유가 없습니다.

하위보기는 모두 동일한 패턴이며 data-region='flow-region-"을 가지며 index을 포함합니다. 이것은 수집 및 그 견해의 명백한 패턴입니다. 당신이 확실히 여기 CollectionView 또는의 CompositeView, 대신의 최우선 지역을 사용하는 것이 좋습니다 경우라면

등 가까운 완전히 리셋 아이 뷰를, 추가/제거, 비슷한 일을 할 수 collectionView으로

.

모델을 제거하면 제거보기의 원인이됩니다 이유에 대해

1. 업데이트.

   마리오네트 CollectionView는 청취자가 있기 때문에

   constructor에 :

   this.listenTo(this.collection, "remove", this.removeItemView, this); 
   

2. 런타임에 영역을 추가합니다.

   전에는 해본 적이 없지만 완전히 합법적입니다. 레이아웃에는 프로토 타입 메소드 addRegion(name, definition)이 있으므로 레이아웃의 모든 인스턴스는 런타임에 영역/영역을 추가/제거 할 수 있어야합니다. 사용법은 다음과 같이 될 것이다 : 답장을 보내

   foo_layout.addRegion({region1: '#region-1'});