在 Meteor 中突出显示最后插入的文档答案

【问题标题】：Highlight last inserted document in Meteor在 Meteor 中突出显示最后插入的文档
【发布时间】：2015-10-10 04:56:05
【问题描述】：

我在同一页面上有表单和对象列表。当我插入一个新行时，很难看到新插入的行放在哪里。因此，我认为我可以为新插入的行着色/突出显示（也许几秒钟后删除突出显示）。

我该怎么做？我认为一种方法可以在服务器上使用返回插入的 id (return Collection.insert(doc);) 的方法，并在客户端使用回调

Meteor.call('insertDoc', function(err,result) {
    // do something with result
});

我想我可以使用 reactive-var 来保存最后插入的行的 id 并在循环中突出显示该行

{{#each docs}}
  <li class="{{isActive}}">{{name}}</li>
{{/each}}

如果this._id 等于具有最后插入的 id 的反应变量，则有一个帮助器返回活动。

但这是最好的方法吗？几秒钟后如何去除颜色？我在很多页面上都看到过这种行为，但我找不到任何教程/代码 sn-ps 来实现这一点。

【问题讨论】：

高亮和淡出：stackoverflow.com/questions/12814612/…

标签： javascript node.js mongodb meteor

【解决方案1】：

我不知道你的方法是不是最好的，但我就是这样做的。至于动画，我会使用 CSS3 动画。有很多可供选择（https://developer.mozilla.org/en-US/docs/Web/CSS/animation），您可以轻松地将它们褪色为标准颜色。动画也只会应用于最后一个插入的项目（因为你这样做的方式，只有最后一个项目会有“活动”类）

【讨论】：

【解决方案2】：

我编写了一个包，它使用 Meteor 的 UI hooks 在添加和删除项目时淡入和淡出列表，以帮助用户在数据更改时维护上下文：

https://github.com/mizzao/meteor-animated-each

http://animated-each.meteor.com/ 有一个演示。您可以看到，随着项目的添加和删除，它们会淡入淡出。如果项目被插入屏幕外，可见区域不会滚动。

这并不完全符合您的要求，但您可以使用相同的想法来突出显示项目，而不是简单的淡入。

请注意，所有这些都发生在 UI 呈现级别，而不是模板/代码级别。 UI 挂钩现在也没有很好的文档记录，但它们已经存在了一段时间。

【讨论】：