javascript - 我怎样才能在 marionette.js 中拥有 CollectionView 的 CollectionView ？

Question

我有一个用例，我想要呈现一组collectionViews(或复合 View )。使用 marionette.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 来实现此目的，如果它尝试显示的 subview 有一个集合或者只是一个模型，则该 View 可以进行除冰。因此，对于这个示例，我设置了一个具有名称和可选集合的模型，如果使用该集合，那么它将包含模型集合，而模型集合又可以具有可选集合。

然后定义一个 Collection View ， Collection View 将检查 subview 是否有集合，如果有则将使用 Collection View 作为 subview 。

//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
            }
        }
    }
});

如果没有，那么它将仅使用项目 View 来显示模型

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

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

如果您想在集合上方显示正在渲染的模型的名称，那么您可以使用复合 View ，这也允许我们更好地控制 Hook 到 View 以显示集合

//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>当您在复合 View 内显示复合 View 但通过一些可以修复的调整时，它仍然可以正确呈现。