dwa zbiory wewnątrz Composite View

Question

Więc pracujemy nad projektem za pomocą marionetka i zrobiliśmy duży postęp tak daleko, ale zmaga się z części marionetek zagnieżdżone widoku modelu

więc pozwala zakładać, że mieć mieszkanie (reprezentowane jako widok złożony), a mieszkanie zawiera kolekcję pokoi i kolekcję krzeseł, co chcemy zrobić, to pokoje i krzesła bezpośrednio schodzą z widoku kompozytora, jak możemy to zrobić , wiedząc, że widok złożony może mieć tylko jedną kolekcję dziecięcą, czy powinniśmy używać regionów?

Answer 1

Można to zrobić z zagnieżdżonymi widokami złożonymi. W opisanym przypadku użycia można zagnieździć kompozytView dla swoich apartamentów i pokoi.

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

Czy próbowałeś nas zamiast układu? obsługuje regiony i widok elementów (w razie potrzeby). Sposób w jaki używam tego jest zdefiniowanie kilku regionów w układzie; Wyświetlaj widok kolekcji lub widok przedmiotów w każdym regionie i inne elementy mieszkania w szablonie układu. Tak więc, dla przykładu, twój układ mieszkania zawierałby wszystkie atrybuty mieszkania, a region krzeseł zawiera widok kolekcji krzeseł, a region pokoi mógłby zawierać widok kolekcji pokoi.