关于backbone.js:Backbone.Marionette 的分组集合和视图

 2022-02-12 

Grouped collection and views with Backbone.Marionette

我有一个 Backbone 文档集合,我想按月分组,以便将在同一个月内创建的所有文档分组在一起。我知道我基本上可以通过以下方式实现:

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

现在我有了 byMonth 数组,设置主干视图的最佳方法是什么,当项目添加到集合时自动更新,其中一个文档的日期发生更改等 - 以便文档会自动移动到正确的组并相应地更新视图?

PS。我还想显示每个月的汇总数据(例如,文档数量等)。

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


我想了很多,但没有一个完美的答案,但这是我的笔记(脑力转储),以防它们帮助/激发你的任何新想法:

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

  • 过滤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
  • 过滤 View 内的集合:将完整集合传递给每个 CollectionView,并覆盖 appendHTML 方法(或 showCollection)以仅显示满足条件的集合。

    • 优点:获得自动更新的魔力,并且仍然只处理代码中任何地方的单个集合
    • 缺点:需要额外的逻辑才能在每个部分的顶部显示计数。需要一些额外的逻辑来显示空视图,并且可能会产生其他后果,因为我怀疑 CollectionViews 是为此而设计的。他们可能在后台使用所有 itemView 做一些聪明的事情——这可能效率低下——需要研究。查看源代码并找到要覆盖的最佳(最高级别)函数以不打扰处理不相关的项目
  • 单视图选项:通过手动将每个视图附加到页面的右侧部分来过滤视图的 appendHtml() 函数内的集合。

    • 优点:所有逻辑都在一个地方,但可能不是正确的地方(CollectionView)。自动更新有效。仍然只处理代码中各处的单个集合。
    • 缺点:需要额外的逻辑才能在每个部分的顶部显示计数。需要为每个部分手动处理 emptyView,这并不难 - 在您的模板中只需定义包含空消息的所有部分,然后在 appendHtml 函数中,当您确定项目属于哪个部分时,只需在附加之前隐藏该部分的空消息。那么问题是如何在从集合中删除项目时隐藏空白部分。唯一的方法是侦听集合上的删除事件,并检查所有部分以查看它们是否为空?或者只是重新渲染整个事情。
  • 当我第一次加入我现在的团队时,他们有一些实现选项 1B 的旧代码,我认为这很糟糕。然后,当我必须实现类似的东西时,我选择了选项 3,它有效,但随着时间的推移有点混乱。下次我想我会尝试选项 1A,但目前尚未测试...

    告诉我你最后做了什么!

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

    • CollectionView / CompositeView 应该有一个可选的过滤方法
    • 添加过滤集合视图的功能

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

    控制器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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);
      }
    }