javascript - 如何在 Meteor 中对光标处的项目进行分组？

Question

介绍。 假设我们有 Messages 集合。该集合中的每个文档如下所示:

{
  createdAt: 1432018583531,
  message: 'Hello',
  username: 'chuk',
  chatId: '82rWv8bv4YbxEiCky'
}

渲染简单的消息列表很容易:

<template name="messages">
  {{#each messages}}
    {{> singleMessage}}
  {{/each}}
</template>
---
Template.messages.helpers({
  messages: function () {
    return Messages.find(selector, options);
  }
});

输出可能如下所示:

• @chuk [May 18, 10:00 AM]: Hello
• @geck [May 18, 10:01 AM]: Hi
• @geck [May 18, 10:01 AM]: How R U?
• @chuk [May 18, 10:02 AM]: Fine :-)
• @chuk [May 19, 09:02 PM]: Hey?

问题。如何按日期和作者对邮件进行分组？如何将输出转换为如下所示:

May 18

• @chuk, 10:00 AM
  — Hello
• @geck, 10:01 AM
  — Hi
  — How R U?
• @chuk, 10:02 AM
  — Fine :-)

May 19

• @chuk, 09:02 PM
  — Hey?

想法。第一个想法是使用 .fetch() 并通过迭代所有消息来强制分组消息:

<template name="messages">
  {{#each dateBlock}}
    {{#each messageBlock}}
      {{#each}}
        {{> singleMessage}}
      {{/each}}
    {{/each}}
  {{/each}}
</template>
---
Template.messages.helpers({
  dateBlock: function () {
    return makeDateBlocks(Messages.find(selector, options).fetch());
  },
  messageBlock: function () {
    return makeMessageBlocks(this);
  }
});

但我认为这是一个不好的方法，因为 .fetch() 会导致每次更改时重新计算所有数据。列表的增长速度会根据元素数量而减慢。

进行此类分组的最佳方法是什么？嘿， meteor ？可能我们需要插入分隔符并通过 jQuery 根据 afterFlush 回调中的数据属性为元素提供特殊的类？或者？

Answer 1

您可以在 find 调用中转换消息，以在 Messages 文档中添加 new_user 和 new_date 标志如果自上一次以来时间或用户发生了变化:

Template.messages.helpers({
  messages: function () {
    var lastMessage = null;
    return Messages.find({chatId: this.chatId}, {sort: {createdAt: -1}, transform: function (messageItem) {
      if (!lastMessage || lastMessage.createdAt < messageItem.createdAt.setHours(0,0,0,0))
        messageItem.new_date = true;
      else if (lastMessage.username !== messageItem.username)
        messageItem.new_user = true;
      lastMessage = {username: messageItem.username, createdAt: messageItem.createdAt.setHours(0,0,0,0)}
      return messageItem;
    }});
  }
});

然后，在您的模板中:

<template name="messages">
  {{#each messages}}
    {{#if new_date}}
      {{> messageDate}}
      {{> userAndTime}}
    {{else if new_user}}
      {{> userAndTime}}
    {{/if}}
    {{> singleMessage}}
  {{/each}}
</template>

如果这些转换调用被阻塞，这应该可以工作。我找不到证据表明他们不这样做。