流星页面加载后如何调用函数

Question

我正在使用 cursor.observechanges 来查看是否在 mongo 中插入了任何新记录，并在插入新记录时发出通知，它运行良好。但是这里的问题是当我的应用程序第一次加载时，我收到了这些通知警报，因为它观察到了这些变化。当我点击下一页时也是如此。

cursor.observeChanges({
  added: function(id, object) {
    Notification.error('NEW Record',object);
    var audio = new Audio('audio.mp3');
    audio.play();
  }
});

所以我只需要在页面加载后调用这个函数。我尝试使用

Template.foo.onRendered(function () {
  cursor.observeChanges({
    added: function(id, object) {
      Notification.error('NEW Record',object);
      var audio = new Audio('audio.mp3');
      audio.play();
    }
  });
});

但在我的情况下它不起作用。有没有其他方法可以做到这一点。或者如果可能的话，我们如何设置 5 秒的时间并在该时间间隔之后调用上述函数？ 任何帮助将不胜感激。谢谢！

Answer 1

该行为是正确的，因为确实向模板添加了这些记录。浏览并返回，这将重新创建模板，现在所有这些相同的记录再次成为模板的新记录。

您需要将模板新记录的概念与应用程序新记录的概念分开。

我可能会用时间戳来解决这个问题。例如

1. 编写一个提供服务器当前时间的 Meteor 方法
2. 在模板的 onCreated() 中，调用该方法并保存结果
3. 在 added: 处理程序中，将添加项的创建时间戳与保存的时间进行比较
4. 如果添加的项目较旧，则不执行任何操作
5. 如果添加的项目较新，请采取行动

这意味着您的收藏将需要一个 createdAt 字段。

此解决方案适用于重新加载应用程序、浏览到/从模板以及长时间运行的模板。

为获得最佳效果，在 Meteor 方法调用返回服务器时间之前，不要开始订阅。这一切都应该发生在 onCreated() 中。

Answer 2

根据docsTemplate#onRendered：

注册一个函数，当这个模板的一个实例被插入到 DOM 中时被调用。

尝试将您的代码包装在Meteor.defer：

Template.foo.onRendered(function() {
  Meteor.defer(function() {
    cursor.observeChanges({
      added: function(id, object) {
        Notification.error('NEW Record',object);
        var audio = new Audio('audio.mp3');
        audio.play();
      }
    });
  })
});

如果不起作用，请尝试将其包裹在Meteor.setTimeout：

Template.foo.onRendered(function() {
  Meteor.setTimeout(function() {
    cursor.observeChanges({
      added: function(id, object) {
        Notification.error('NEW Record',object);
        var audio = new Audio('audio.mp3');
        audio.play();
      }
    });
  }, 5000)
});