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

复合视图中的两个集合

2 个答案: