如何渲染不同木偶视图的集合

提问者：小点点

如何渲染不同木偶视图的集合

我正试图呈现一个视图的主干集合。集合可以是任何类型的木偶视图（layoutView、CompositeView、collectionView、ItemView）。当我尝试渲染时，每个渲染的视图都会得到“[object]”。这让我相信，当它从集合中获取一个视图时，它不知道要渲染哪个视图。现在，我已经开始在CollectionView中使用getChildView（），该视图将呈现视图集合，但我不确定如何指定希望子视图的类型。

刚接触木偶和在线资源的人似乎很少（也许我搜索错了？？）我希望在视图中有视图（子视图？不需要子视图），但不必使用LayoutView，也不必指定区域，因为子视图的数量可能会有所不同，而只需让collectionView渲染一个木偶视图集合，不管有多少个。

谢谢你抽出时间，

共1个答案

匿名用户

因此，经过几天的实验，完全将这种方法留给另一种方法（CollectionView的childView必须是ItemView吗？）然后再回到它。我觉得好像我已经弄明白了。

此方法用于在集合/复合视图下嵌套多个木偶视图，因此让我们使用一个可以有任意数量面板的列的示例

首先我们为列创建视图集合

//These exist in the view...
class PanelView1 extends Marionette.CompositeView
...
class PanelView2 extends Marionette.ItemView
...


columnPanelCollection = new ColumnPanelCollection([
        index: 1,   view: PanelView1, data: dataForPanelView1Collection
    ,
        index: 2,   view: PanelView2 , data: null
    ])

因此，我们为列（columnPanelCollection）创建一个集合，将木偶视图的类型（而不是实例）So PanelView1和PanelView2传递到“view:”属性中。还可以在“数据”属性中传递视图在集合中可能需要的任何数据

现在我们将刚刚创建的集合放入CollectionView

columnCollectionView= new ColumnCollectionView(
        collection: columnPanelCollection 
    )

在ColumnCollectionView类中，我们使用回调函数

getChildView:(model)->
    return model.get('view')

我们返回'view:'属性，这是我们想要创建的视图类型，这将基于该类型创建一个子视图。然后在childView的类（例如PanelView1或PanelView2类）中，我们可以使用onShow回调并基于我们提供的“data:”属性为该视图设置一个集合

class PanelView1 extends Marionette.CompositeView
...
template: ....
collection: new PanelDataCollection()

onShow:(view)->
    modelCollection = view.model.get("data").models 
    @collection.reset(modelCollection) if modelCollection

Sidenote：集合属性仍然必须在PanelView类中指定，这就是为什么我将其初始化为'new PanelDataCollection（）'，然后将其设置为onShow

然后，我们可以使用LayoutView并将columnCollectionView放入其中一个区域并显示它。