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

Question

Iam using cursor.observechanges to see whether there is any new record inserted in mongo and giving a notification as new recored inserted and it is working good.But the issue here is when my app is loaded first time,Iam getting those notification alerts since it observed those changes.Same way when I click on next page.

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

So I need to call this fuction only after the page gets loaded.I tried using

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

But it didnt worked in my case.Is there any other way we can do this.Or else if possible how can we set a time of 5 secs and call the above fuction after that time interval? Any help would be appreciated.thanks!

Answer 1

According to docs Template#onRendered :

Register a function to be called when an instance of this template is inserted into the DOM.

Try to wrap your code in 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();
      }
    });
  })
});

If it will not help, try to wrap it in 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)
});

Answer 2

the behaviour is correct because, to the template, those records are indeed added. browse away and browse back, which re-creates the template, and now all those same records are once again new to the template.

you need to separate the concept of records being new to the template and records being new to the app.

i might solve that with a timestamp. eg

1. write a Meteor method that provides the current time of the server
2. in the template's onCreated(), call that method and save off the result
3. in the added: handler, compare the creation timestamp of the added item to that of the saved time
4. if the added item is older, do nothing
5. if the added item is newer, take your action

this means your collection will need a createdAt field.

this solution should work both for reloading the app, browsing to/from the template, and a long-running template.

for best effect, don't start your subscription until the Meteor method call has returned with the server time. all this should happen in onCreated().