兩個類別

Question

所以我們用木偶工作的一個項目，我們已經取得了良好的進展，到目前爲止，但我們與木偶嵌套視圖模型的一部分掙扎，

所以讓我們假設我們有一個公寓（以複合視圖表示），而公寓包含一系列房間和一系列椅子，我們想要做的是讓房間和椅子直接下降複合視圖，我們怎麼做到這一點，知道複合視圖只能有一個子集合，我們應該使用區域嗎？

Answer 1

您可以使用嵌套複合視圖來完成此操作。對於您描述的用例，您可以爲您的公寓和房間嵌套compositeView。

小提琴： http://jsfiddle.net/yCD2m/23/

標記

<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

您是否嘗試過我們改爲佈局？它支持區域和項目視圖（如果需要）。我使用這種方法是在佈局中定義幾個區域;在佈局模板中顯示每個區域和任何其他公寓內的集合視圖或項目視圖。因此，對於您的示例，您的公寓佈局將包含所有公寓屬性，椅子區域將包含椅子集合視圖，而房間區域可包含房間集合視圖。