Creazione di un layout che accetta un numero variabile di viste (e quindi regioni)

Question

Il mio obiettivo Ho bisogno di creare un layout personalizzato (un layout di flusso) che può ricevere un numero variabile di viste e basato su di essi, crea regioni come necessario e all'interno di quelle regioni mostra le viste che vengono passate. Le viste possono essere disposte verticalmente o orizzontalmente.

Requisito Il layout ha un modello in cui inizialmente le regioni non sono definite. Contiene solo un wrapper (data-role="region-wrapper") in cui verranno renderizzate le regioni aggiunte.

Il mio approccio.

1 - estendere un Marionette.Layout (ovviamente)

2 - Ovveride il construtor come la seguente

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

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

    this._defineRegions(); // see 3 
}    

3 - Definire regioni dinamicamente

_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 - Render regioni e viste nel metodo onRender all'interno dello stesso layout

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

Questa soluzione sembra funzionare, ma mi piacerebbe sapere se sto seguendo una valida o no. Qualche altro approccio da seguire?

Answer 1

Forse non sono stato completamente seguito, ma non riesco a vedere alcun motivo per cui un collectionView non può essere utilizzato in questo caso.

Le viste secondarie sono tutte nello stesso schema, con data-region='flow-region-" e persino con index. Questo è un modello ovvio di raccolta e la sua visione.

Con CollectionView si possono fare cose simili, aggiunta/rimozione di vista del bambino, completamente di reset, vicino ecc

Se questo è il caso consiglio vivamente di utilizzare CollectionView o CompositeView, invece di Regione prioritario qui.

Aggiornamento

1. Sul perché la rimozione di un modello causerà la rimozione di vista.

   Perché Marionette CollectionView ha tale ascoltatore in constructor:

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

2. Aggiungi regione in fase di esecuzione.

   È del tutto legittimo, anche se non l'ho mai fatto prima. Layout ha il metodo prototipo addRegion(name, definition), quindi qualsiasi istanza di layout dovrebbe essere in grado di aggiungere/rimuovere aree/regioni in runtime. L'utilizzo sarebbe come questo:

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