Javascript 使用木偶对集合视图中的项目进行分组

我正在使用主干网和木偶网构建一个应用程序。我计划使用集合视图来显示一些项目，然后允许对它们进行筛选、排序和分组

我想知道是否有什么好的设计思想可以以分组的方式添加html。我有一些想法，但我想知道是否有人可能有意见，其中将更好的设计

我的第一个想法是更改集合视图上的appendHtml方法，如果启用了分组，我可以让appendHtml函数查找或创建子组的bin并将子视图放在其中

appendHtml: function(collectionView, itemView, index){
  var $container = this.getItemViewContainer(collectionView);

  // get group from model
  var groupName = itemView.model.get("group");

  // try to find group in child container
  var groupContainer  = $container.find("." + groupName);

  if(groupContainer.length === 0){
    // create group container
    var groupContainer = $('<div class="' + groupName + '">')
    $container.append(groupContainer);
  }

  // Append the childview to the group
  groupContainer.append(itemView);
}

appendHtml:函数（collectionView、itemView、index）{
var$container=this.getItemViewContainer（collectionView）；
//从模型中获取组
var groupName=itemView.model.get（“组”）；
//尝试在子容器中查找组
var groupContainer=$container.find（“.”+groupName）；
if（groupContainer.length==0）{
//创建组容器
var groupContainer=$（''）
$container.append（groupContainer）；
}
//将子视图附加到组
追加（itemView）；
}

我的第二个想法是首先将集合分成若干组，然后可能呈现多个视图。。。这一个看起来可能需要更多的工作，但就代码结构而言也可能更好一些

任何能引起评论的建议或想法都会很棒

---

谢谢

你建议的两件事我都做了，而且都做得很好。这在很大程度上取决于你喜欢哪一个，也许哪一个更适合你的场景

如果您有已经在分组层次结构中的数据，使用许多层次结构模型/集合插件之一或您自己的层次结构代码，那么呈现组列表的想法可能更容易，每个组呈现一个项目列表

如果您的数据是平面的，但包含一个要分组的字段，那么更改HTML可能会更容易

---

hth

也许不是你想要的，但这里有一个有点相关的问题：

我对这个问题的解决方案是——一个可以呈现为列表或网格（“按行分组的项”）的已获取集合是在“包装器”CompositeView中使用u.groupBy（），并将修改后的数据沿链传递给另一个CompositeView（行），然后再传递给ItemView

Views.Grid = Backbone.Marionette.CompositeView.extend({
    template: "#grid-template",
    itemView: Views.GridRow,
    itemViewContainer: "section",
    initialize: function() {
        var grid = this.collection.groupBy(function(list, iterator) {
            return Math.floor(iterator / 4); // 4 == number of columns
        });
        this.collection = new Backbone.Collection(_.toArray(grid));
    }
});

下面是一个演示：

这是对问题和答案的补充。我的方法使用一个主集合视图和另一个集合视图作为其子视图

集合视图有一个“addChild”方法，每当将模型添加到视图的集合中时都会调用该方法。“addChild”方法负责呈现子视图，并将其添加到集合视图在给定索引处的HTML中。您可以在github上看到源代码。为了简化起见，我将其粘贴到这里：

addChild: function(child, ChildView, index) {
    var childViewOptions = this.getOption('childViewOptions');
    if (_.isFunction(childViewOptions)) {
      childViewOptions = childViewOptions.call(this, child, index);
    }

    var view = this.buildChildView(child, ChildView, childViewOptions);

    // increment indices of views after this one
    this._updateIndices(view, true, index);
    this._addChildView(view, index);
    return view;
}

如您所见，addChild方法调用buildChildView方法。这个方法实际上构建了视图

// Build a `childView` for a model in the collection.
buildChildView: function(child, ChildViewClass, childViewOptions) {
var options = _.extend({model: child}, childViewOptions);
return new ChildViewClass(options);
}

因此，对于您的用例，如果您的分组条件匹配，您可以重写“addChild”方法并调用原始方法。然后在重写的“buildChildView”方法中，您可以将组（它是集合的子集）传递给它的子视图，它是另一个木偶。CollectionView

例如：

MyCollectionView.prototype.addChild = function(child, ChildView, index) {
    if(mycriteria){
        return ProductGroup.__super__.addChild.apply(this, arguments);
    }
};

MyCollectionView.prototype.buildChildView = function(child, ChildViewClass, 
childViewOptions) {

    options = _.extend({
        collection: "Pass your group collection which is a subset of your main collection"},
        childViewOptions
    );

    return new ChildViewClass(options);
  };

---

我更喜欢你的第一种方法，而且可能更容易。演示文稿应该在视图中，而且拆分一个集合只是为了以不同的方式显示它似乎很奇怪。在某些情况下，您可能需要一个按钮来切换列表视图是否分组，然后多个集合可能会妨碍您。是的，这就是我使用的一个。。。不过我确实需要更加小心一点。。。因为我想给每个组添加标题。。。这就意味着我需要确保我也能跟踪这些信息。这是不幸的，因为提线木偶在跟踪添加/删除项目方面做得很好，通常没有太多额外的东西……我想知道如果你在你的收藏中添加一个

比较器

，按组排序是否会有所帮助。然后，当有任何添加/删除/重置更改时，在视图中，您可以在木偶插入/删除后执行某种后处理步骤，以插入标题。。。我想做任何事都有1000种方法。当我把这些放在一起的时候。。。我以第一种方式对分组进行了测试实现。。。我不确定我是否喜欢它。。。问题是，我将显示一个经过筛选的集合，其中可以添加/删除/重置项。如果我只是在渲染时抛出标题，那么如果定义了一个新的过滤器来删除所有的组项。。。标题将保留，除非我重新绘制所有内容…嗨，MattyP，我只是想让你知道我需要修改groupContainer.append（itemView.el）的最后一行；为了让它工作。我不确定是不是因为版本不同。希望它能帮助一些人。这是我为我的第二个想法考虑的想法。。。我想做的一件事仍然是处理过滤。。。当事物被分组时。。。所以我想我必须连接所有的子集合来监听父母的添加/删除/重置。。。事实上，我开始喜欢这个想法，因为我认为它。。。