木偶中的嵌套复合视图答案

【问题标题】：Nested composite views in marionette木偶中的嵌套复合视图
【发布时间】：2014-07-11 14:14:28
【问题描述】：

在处理 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
});

对象集合应该如何构造？

【问题讨论】：

标签： marionette backbone-views

【解决方案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",
});

【讨论】：