Tworzenie układu, który akceptuje zmienną liczbę widoków (a więc regionów)

Question

Mój cel Potrzebuję utworzyć niestandardowy układ (układ przepływu), który może otrzymać zmienną liczbę widoków i na ich podstawie tworzy regiony w miarę potrzeby iw obrębie tych regionów pokazuje widoki, które są przekazywane. Widoki mogą być ustawione pionowo lub poziomo.

Wymaganie Układ ma szablon, w którym początkowo nie zdefiniowano regionów. Zawiera tylko opakowanie (data-role="region-wrapper"), w którym dodane zostaną regiony dodane.

Moje podejście.

1 - Rozszerzanie Marionette.Layout (oczywiście)

2 - Ovveride w konstruktor jak następującym

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

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

    this._defineRegions(); // see 3 
}    

3 - określają regiony dynamicznie

_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 - renderowania regiony i widok w trybie onRender w tym samym układzie:

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); 
} 

To rozwiązanie wydaje się działać, ale chciałbym wiedzieć, czy podążam za poprawnym, czy nie. Jakieś inne podejście do naśladowania?

Answer 1

Może nie jestem w pełni śledzony, ale nie widzę żadnego powodu, dla którego collectionView nie może być użyty w tym przypadku.

Widoki podrzędne są w tym samym wzorze, mając data-region='flow-region-", a nawet mają index. Jest to oczywisty wzorzec zbierania i jego pogląd.

Z CollectionView można robić rzeczy podobne, dodawanie/usuwanie widoków podrzędnych, w pełni resecie bliskie itp

Jeśli jest to sprawa zdecydowanie zaleca się stosowanie CollectionView lub CompositeView zamiast nadrzędny Region tutaj.

Aktualizacja

1. o tym, dlaczego usunięcie modelu spowoduje usunięcie widoku.

   Ponieważ Marionette CollectionView ma takiego słuchacza w constructor:

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

2. Dodaj region w czasie wykonywania.

   Jest to całkowicie uzasadnione, chociaż wcześniej tego nie robiłem. Układ ma prototypową metodę addRegion(name, definition), więc każda instancja układu powinna móc dodawać/usuwać region/regiony w środowisku wykonawczym. Wykorzystanie byłoby tak:

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