due collezioni all'interno di un composito Visualizza

Question

Quindi stiamo lavorando a un progetto che utilizza marionette e abbiamo fatto un buon progresso finora, ma siamo alle prese con una parte della marionetta nidificato modello di vista,

così lascia supporre che noi avere un appartamento (rappresentato come una vista composita), e l'appartamento contiene una collezione di stanze e una collezione di sedie, quello che vogliamo fare è avere le stanze e le sedie una discendente diretta della vista composita, come possiamo fare questo , sapendo che la vista composita può avere una sola collezione di bambini, dovremmo usare le regioni?

Answer 1

È possibile eseguire questa operazione con viste composite nidificate. Per il caso d'uso che hai descritto potresti nidificare un compositeView per i tuoi appartamenti e camere.

Fiddle: http://jsfiddle.net/yCD2m/23/

Markup

<div id="apartments"></div> 

<script type="text/html" id="appartment"> 
    <div> 
     <h2>Apartment: <%=apartment%></h2> 
     <ul></ul> 
    </div> 
</script> 

<script type="text/html" id="room"> 
    <h3><%=name%></h3> 
    <ul></ul> 
</script> 

<script type="text/html" id="chair"> 
    <b><%=chairType%></b> 
</script> 

JS

var apartments = [ 
    {apartment: '1a', rooms: [ 
     {name: 'master bed', chairs: []}, 
     {name: 'kitchen', chairs: [ 
      {chairType: 'stool'}, {chairType: 'stool'}]}, 
     {name: 'living room', chairs: [ 
      {chairType: 'sofa'}, {chairType: 'love seat'}]}] 
    }, 
    {apartment: '2a', rooms: [ 
     {name: 'master bed', chairs: []}, 
     {name: 'kitchen', chairs: [ 
      {chairType: 'shaker'}, {chairType: 'shaker'}]}, 
     {name: 'living room', chairs: [ 
      {chairType: 'sectional'}]}] 
    }]; 

var chairModel = Backbone.Model.extend({}); 

var roomModel = Backbone.Model.extend({ 
    initialize: function(attributes, options) { 
     this.chairs = new Array(); 
     _.each(attributes.chairs, function(chair){ 
      this.chairs.push(new chairModel(chair));  
     }, this); 
    }   
}); 

var ApartmentModel = Backbone.Model.extend({ 
    initialize: function(attributes, options) { 
     this.rooms = new Array(); 
     _.each(attributes.rooms, function(room){ 
      this.rooms.push(new roomModel(room));  
     }, this); 
    } 
}); 

var ApartmentCollection = Backbone.Collection.extend({ 
    model: ApartmentModel 
}); 

var ChairView = Backbone.Marionette.ItemView.extend({ 
    template:'#chair' 
}); 

var RoomView = Backbone.Marionette.CompositeView.extend({ 
    template: '#room', 
    itemViewContainer: 'ul', 
    itemView: ChairView, 
    initialize: function(){ 
     var chairs = this.model.get('chairs'); 
     this.collection = new Backbone.Collection(chairs); 
    } 
}); 

var ApartmentView = Backbone.Marionette.CompositeView.extend({ 
    template: '#appartment', 
    itemViewContainer: 'ul', 
    itemView: RoomView,  // Composite View 
    initialize: function(){ 
     var rooms = this.model.get('rooms'); 
     this.collection = new Backbone.Collection(rooms); 
    } 
}); 

var ApartmentCollectionView = Backbone.Marionette.CollectionView.extend({ 
    itemView: ApartmentView // Composite View 
}); 

apartmentCollection = new ApartmentCollection(apartments); 

apartmentCollectionView = new ApartmentCollectionView({ 
    collection: apartmentCollection 
});  

App.apartments.show(apartmentCollectionView); 

Answer 2

ci hai provato invece di un layout? supporta regioni e un itemview (se necessario). Il modo in cui sto usando questo è definire diverse regioni nel layout; mostra una vista raccolta o una vista oggetto in ogni regione e qualsiasi altra roba dell'appartamento nel modello di layout. quindi, per il tuo esempio, il layout dell'appartamento conterrà tutti gli attributi dell'appartamento e una regione di sedie conterrà una vista raccolta sedie e una regione stanze potrebbe contenere una vista raccolta camere.