复合视图中的两个集合

Question

所以我们正在做一个使用木偶的项目，到目前为止我们已经取得了不错的进展，但是我们在木偶嵌套视图模型的一部分方面遇到了困难，

假设我们有一个公寓（表示为复合视图），并且该公寓包含一组房间和一组椅子，我们想要做的是让房间和椅子直接下降到公寓复合视图，我们怎么能做到这一点，知道复合视图只能有一个子集合，我们应该使用区域吗？

Answer 1

您是否尝试过改用布局？它支持区域和项目视图（如果需要）。我使用它的方式是在布局中定义几个区域；在布局模板中显示每个区域中的集合视图或项目视图以及任何其他公寓内容。因此，对于您的示例，您的公寓布局将包含所有公寓属性，并且椅子区域将包含椅子集合视图，而房间区域可能包含房间集合视图。

Answer 2

您可以使用嵌套的复合视图来做到这一点。对于您描述的用例，您可以为您的公寓和房间嵌套一个复合视图。

小提琴： 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);