牵线木偶中的嵌套复合视图

时间:2014-07-10 21:21:32

标签: marionette backbone-views

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

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 个答案:

答案 0 :(得分:1)

这是完全可能的,但您需要一些额外的布线。我认为通常不认为最好的做法是使用具有属性作为另一个集合的模型的集合。 我不完全了解你的用例,所以我假设你的attributes只是一个字符串数组而不是更复杂的东西。

您还应该避免使用ObjectAttribute等变量名称,因为这些名称与保留字非常接近。我在我的例子中重命名了这些观点。

因此,主要是在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",
});