我如何在提线木偶.js中拥有CollectionView的CollectionView

Question

我有一个用例，希望在其中呈现collectionViews（或复合视图）的集合。使用marionete.js最好的方法是什么？

我的模型结构如下-

A 
|
|-- Collection<B>
               |
               |--Collection<C>

我想渲染如下-

A1
|
|--B1
|  |
|  C1
|  |
|  C2
|  |
|  C3
|
|--B2
   |
   C4
   |
   C5
   |
   C6

最好的方法是什么？我不希望它像这个

A1
|
|--B1
|  |
|  |--C1
|  |
|  |--C2
|  |
|  |--C3
|
|--B2
   |
   |--C4
   |
   |--C5
   |
   |--C6

Answer 1

因此，您可以通过创建一个集合视图来实现这一点，该视图可以指示它试图显示的子对象是否有集合或是否只是一个模型。因此，在这个例子中，我设置了一个模型，它有一个名称和一个可选的集合，如果使用该集合，那么它将包含一个模型集合，而模型集合又可以有一个可选集合。

然后定义集合视图，集合视图将检查子级是否有集合，如果有，则将使用集合视图作为子级。

//collection view that can choose to display another collection view or a model
myApp.Views.View1 = Marionette.CollectionView.extend({
    tagName: "ul",
    //overridden getChildView to return either another collection view or an item view
    getChildView: function (child) {
        if (child.get("collection")) {
            return myApp.Views.View1;
        }
        return myApp.Views.ItemView;
    },
    //set either the collection or the model depending which view we are using
    childViewOptions: function (model, index) {
        if (model.get("collection")) {
            return {
                collection: model.get("collection"),
            }
        } else {
            return {
                model: model
            }
        }
    }
});

如果没有，那么它将只使用项目视图来显示模型

//item view to display final model
myApp.Views.ItemView = Marionette.ItemView.extend({
    tagName: "li",
    template: _.template('<%= name %>'),
})

它在这里运行-http://jsfiddle.net/leighking2/r5ogoL5h/

如果你想在集合上方显示正在渲染的模型的名称，那么你可以使用复合视图，这也允许我们更多地控制挂钩到视图中以显示集合

//collection view that can choose to display another collection view or a model
myApp.Views.View1 = Marionette.CompositeView.extend({
    tagName: "ul",
    template: _.template('<li><%= name %></li><li><ul class="collectionHook"></ul></li>'),
    childViewContainer: ".collectionHook",
    //overridden getChildView to return either another collection view or an item view
    getChildView: function (child) {
        if (child.get("collection")) {
            return myApp.Views.View1;
        }
        return myApp.Views.ItemView;
    },
    //set either the collection or the model depending which view we are using
    childViewOptions: function (model, index) {
        if (model.get("collection")) {
            return {
                model: model,
                collection: model.get("collection"),
            }
        } else {
            return {
                model: model
            }
        }
    }
});

http://jsfiddle.net/leighking2/kx9kuup0/

唯一的问题是html不是100%有效，因为当您在复合视图中显示复合视图时，最终会得到一个双<ul>，但经过一些可以修复的调整，它仍然可以正确渲染。