2

我有一个要按月分组的文档的主干集合，以便将在同一个月内创建的所有文档组合在一起。我知道我基本上可以通过以下方式实现这一目标：

var byMonth = documents.groupBy(function(doc){
  return this.get('date').getMonth()
});

既然我有了byMonth数组，那么设置主干视图的最佳方法是什么正确的组和视图相应更新？

PS。我还想显示每个月的汇总数据（例如，文档数量等）。

Marionette 的 CompositeView 非常适合此类事情，但我不确定是否以及如何使其与分组集合一起使用？

4

2 回答 2

1

我已经考虑了很多，并没有一个完美的答案，但这是我的笔记（脑力转储），以防它们帮助/激发你的任何新想法：

显示（和自动更新）分为 3 个部分/组的集合的最佳方式，例如本周、下周和即将到来的

  1. 过滤View外的集合：在Controller中创建过滤后的子集合，每个CollectionView传一个。然后有 2 个用于修改集合的选项：
    • a) 直接修改3个子集合
      • 优点：自动更新将起作用，CollectionView 中不需要过滤逻辑，emptyView 将起作用，在每个部分的顶部很容易计数。
      • 缺点：必须在我们可能想要修改它们的任何地方传递这 3 个集合，并且在添加/删除事件时有这个额外的逻辑：if (event.time<next-week) {...} else if (event.time<upcoming) {...} else {...}. 可以将所有这些抽象为一个新实体，该实体具有所有 3 个集合的引用，并具有包含上述逻辑的简单添加/删除方法。
      • 另一个缺点：项目不能在这些子集合之间移动，如果分组是特定时间的，这可能很关键。虽然我猜这只会在完全重新渲染时发生，所以你可以有一个 updateSubCollections 方法并调用它 onBeforeRender 或其他什么。
    • B）仅修改父集合 - 需要主集合上的侦听器，用于在添加/删除时手动重新过滤控制器中的每个子集合，并手动重新渲染所有 3 个列表视图。
      • 优点：CollectionView 非常简单——没有过滤逻辑等，emptyView 可以正常工作，很容易在每个部分的顶部进行计数。
      • 缺点：你失去了自动更新的魔力（当一个集合发生变化时，它的 collectionView 会自动更新），并且每次都需要一个愚蠢的（昂贵的）重新渲染整个 collectionView
  2. 过滤 View 内的集合：将完整集合传递给每个 CollectionView，并覆盖 appendHTML 方法（或 showCollection）以仅显示满足条件的集合。
    • 优点：获得自动更新的魔力，并且仍然只处理代码中任何地方的单个集合
    • 缺点：需要额外的逻辑才能在每个部分的顶部显示计数。是否需要一些额外的逻辑来显示空视图，并且可能会产生其他后果，因为我怀疑 CollectionViews 是为此而设计的......他们可能在后台使用所有 itemViews 做聪明的事情 - 它可能效率低下 - 需要研究。查看源代码并找到要覆盖的最佳（最高级别）函数以不打扰处理不相关的项目
  3. 单视图选项：通过手动将每个视图附加到页面的右侧部分来过滤视图的 appendHtml() 函数内的集合。
    • 优点：所有逻辑都在一个地方，但可能不是正确的地方（CollectionView）。自动更新有效。仍然只处理代码中各处的单个集合。
    • 缺点：需要额外的逻辑才能在每个部分的顶部显示计数。需要为每个部分手动处理 emptyView，这并不难 - 在您的模板中只需定义包含空消息的所有部分，然后在 appendHtml 函数中，当您确定项目属于哪个部分时，只需在附加之前隐藏该部分的空消息。那么问题是如何在从集合中删除项目时隐藏空白部分。唯一的方法是侦听集合上的删除事件，并检查所有部分以查看它们是否为空？或者只是重新渲染整个事情。

当我第一次加入我现在的团队时，他们有一些实现选项 1B 的旧代码，我认为这很糟糕。然后，当我必须实现类似的东西时，我选择了选项 3，它有效，但随着时间的推移有点混乱。下次我想我会尝试选项 1A，但它目前未经测试......

让我知道你最后做了什么！

编辑：关于 Github 上 Marionette 项目的几个相关问题：

于 2014-09-22T19:16:46.300 回答
0

您可以创建一个新的 byMonth 集合并绑定一个函数以在每次文档集合更改时重置它。

控制器

App.Controller = function(){
  this.documents = new DocumentCollection();
  this.byMonthCollection = new ByMonthCollection(); 
  this.byMonthView = new ByMonthView({collection: this.byMonthCollection});
}

_.extend(App.Controller.prototype, {
  start: function() {
    this.documents.bind("change", _.bind(this.groupByMonth, this));
    this.documents.fetch();
  },
  groupByMonth: function() {
    var grouped = documents.groupBy(function(doc){
                    return this.get('date').getMonth() }); 

    this.byMonthCollection.reset(grouped);
  }
}
于 2013-04-09T19:31:37.217 回答