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

Question

我在同一页面上有表格和对象列表。当我插入一个新行时，不容易看到新插入行的位置。因此，我认为我可以对新插入的行进行着色/突出显示（并且可能在几秒钟后删除突出显示）。

我该怎么做？我认为这样做的一种方法是使用服务器上的方法返回插入的id（date("Y-m-d H:i:s", substr($m = microtime(),11)) . substr($m,1,7); ），并在客户端上使用回调

return Collection.insert(doc);

我想我可以使用Meteor.call('insertDoc', function(err,result) { // do something with result }); 来保存最后插入的行的ID，并在循环中用

突出显示该行

reactive-var

并且如果{{#each docs}} <li class="{{isActive}}">{{name}}</li> {{/each}} 等于最后插入的id的反应变量，则有一个帮助器返回活动状态。

但这是最好的方法吗？如何在几秒钟后移除颜色？我在许多页面上看到过这样的行为，但是我找不到任何教程/代码片段来实现这一点。

Answer 1

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

  

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

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

这并不是你想要的，但你可以使用相同的想法突出显示项目，而不是简单的淡入。

请注意，所有这些都发生在UI呈现级别 - 而不是模板/代码级别。 UI钩子目前还没有很好地记录，但它们已经存在了一段时间。

Answer 2

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