2014-07-10 144 views
0

当处理Marionettes不同视图时,是否可以有一个复合视图调用另一个复合视图来调用项目视图?例如,结构可以是对象的列表,其属性的列表中的每个对象:Marionette中的嵌套复合视图

ObjectList = Marionette.CompositeView.extend({ 
    template: "#objectlist-template", 
    childView: Object, 
    initialize: function(){ 
    } 
}); 

Object = Marionette.CompositeView.extend({ 
    template: "#object-template", 
    childView: Attribute 
    initialize: function(){ 
    } 
}); 

Attribute = Marionette.ItemView.extend({ 
    template: "#attribute-template", 
}); 

我试图在我的项目这样做,但它似乎并没有工作:

var objectListView = new ObjectList({ 
    collection: objects 
}); 

对象集合应该如何构造?

回答

1

这是完全可能的,但您需要一些额外的接线。我认为通常不认为最佳做法是使用具有属于另一个集合的模型的集合。 我不完全知道你的用例,所以我会假设你的attributes只是一串字符串,而不是更复杂的东西。

您也应该避免使用变量名称,如Object,Attribute等,因为那些与保留字非常接近的冲突。我在我的例子中重新命名了视图。

所以主要是,在你的ItemView控件,你需要使用你的模型的属性创建集合:

var ItemListView = Marionette.CompositeView.extend({ 
    template : "#objectlist-template", 
    childView : ItemView 
}); 

var ItemView = Marionette.CompositeView.extend({ 
    template : "#object-template", 
    childView : ItemAttributeView 
    initialize : function(){ 
     // Assuming 'itemAttributes' is something like ['red','yellow','green'] 
     var itemAttributes = this.model.get('itemAttributes'); 

     // Map itemAttributes to be objects to instantiate models 
     // `name` can then be used in the attribute's template 
     itemAttributes = _.map(itemAttributes, function(ia){ return { name : ia }; }); 

     // use this array to set the collection for this compositeview 
     this.collection = new Backbone.Collection(itemAttributes); 
    } 
}); 

var ItemAttributeView = Marionette.ItemView.extend({ 
    template: "#attribute-template", 
}); 
+0

谢谢!效果很好! – user3821383