2014-07-10 108 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