Question

首次使用Backbone / Marionette项目。

我将一些数据从API中提取到一个集合中，我想将这些项目分组并在一个标签界面中显示，每个组都会进入自己的标签。

以下是我的代码的提炼版本。我还创建了一个jsfiddle。

var MyModel = Backbone.Model.extend({/* attributes: type, name */});

var MyCollection = Backbone.Collection.extend({model: MyModel});

var MyView = Marionette.ItemView.extend({
    tagName: 'li',
    template: _.template("<%= name %>")   
});

var MyCollectionView = Marionette.LayoutView.extend({
    el: '#tabs-content',
    template: _.template('<div id="A"></div><div id="B"></div><div id="C"></div>'),
    regions: {
        rA: '#A',
        rB: '#B',
        rC: '#C'
    },

    initialize: function() {
        var SubView = Marionette.CollectionView.extend({
            childView: MyView,
            tagName: 'ul'
        });
        this.viewA = new SubView({collection: new Backbone.Collection()});
        this.viewB = new SubView({collection: new Backbone.Collection()});
        this.viewC = new SubView({collection: new Backbone.Collection()});
    },

    onBeforeRender: function() {
        var grouped = this.collection.groupBy('type');
        this.viewA.collection.reset(grouped.a);
        this.viewB.collection.reset(grouped.b);
        this.viewC.collection.reset(grouped.c);
    },

    onRender: function() {
        this.regionManager.get('rA').show(this.viewA);
        this.regionManager.get('rB').show(this.viewB);
        this.regionManager.get('rC').show(this.viewC);
    }
});

关于我的解决方案，有几件事让我感到担忧：

在LayoutView对象中手动创建子视图似乎很乱;有更好的方法吗？
正在将集合复制到子视图中，所以如果我有1000个模型，我现在在内存中有2000个模型

有没有更好的方法来管理它？提前谢谢。

Answer 1

在视图中创建子视图和集合不是一个好习惯，请使用控制器。您可以使用下划线_.groupBy(list, iteratee, [context])拆分数据，并在控制器中手动设置必要的集合。有关应用程序架构的好教程可以在http://www.backbonerails.com/series找到。

另一种方法是，如果没有大量数据，可以覆盖attachHtml方法来指定childView容器。请看这个示例http://jsfiddle.net/7j3sfsvt/

将集合拆分为多个视图（骨干/牵线木偶）

1 个答案: