流星：更新时闪烁数据

Question

我希望有人能帮助解决这个问题，因为这很令人沮丧。

我检查了周围的所有动画包，但它们似乎都是由用户操作激活的，例如单击某个项目。如果更改是从服务器触发的怎么办？

我想在 Collection 从 non-Meteor 来源更改时显示动画。我有一个可以调用 Meteor 服务器方法的 Java 演示应用程序，它会依次更新 Collection.

更改显示在客户端中，所以我知道基本功能正常，但我应该如何编写客户端代码，以便它在更改时闪烁？

想想"Stock market app".

一个在更新时使项目闪烁红色的简单示例会很棒。另外，如何检测何时插入和删除项目？

Answer 1

假设您有一个最喜欢的股票列表模板，每个股票都有一个模板：

<template name="favorites">
    {{#each favorites}}
      {{> stock}}
    {{/each}}
</template>

<template name="stock">
    <div class="row" id="{{_id}}">
        <div class="col-xs-6 symbol">{{symbol}}</span>
        <div class="col-xs-6 quote">{{quote}}</span>
    </div>
</template>

在 onRendered 模板事件中，您可以创建一个观察者来监视对特定查询的更改。只需使用与生成收藏夹列表相同的查询。当任何记录发生更改时，使用 jQuery 找到它并设置突出显示效果：

Template.favorites.onRendered(function() {
  var query = Favorites.find({}, { sort: { symbol: 1 } });

  var handle = query.observeChanges({
    changed: function (id, fields) {
      //this will highlight the row of the updated favorite, using the id from the Favorites collection
      $('#' + id).effect('highlight', {}, 1500);
    }
  });
});

流星：更新时闪烁数据

Meteor : Blink data when updated

javascript

jquery

css-animations

meteor

jquery-animate