Facebook like load new posts in meteor -

i'm in process of learning meteor. followed tutorial create microscope. if 1 submits post meteor re render template users. annoying if there hundreds of posts user come top of page , loose track of was. want implement similar facebook has. when new post submitted template isn't rendered rather, button or link appear. clicking cause template re-render , show new posts.

i thinking of using observechanges on collection detect changes , stop page showing new posts way show them reload page.

meteor.publish('posts', function(options) {   var self = this, posthandle = null;    var initializing = true;    posthandle = posts.find({}, options).observechanges({     added: function(id, post) {        if (initializing){           self.added('posts', id, post);       }      },     changed: function(id, fields) {       self.changed('posts', id, fields);     }   });    self.ready();   initializing = false;   self.onstop(function() { posthandle.stop(); }); }); 

is right path take? if yes, how alert user of new posts? else, better way implement this?

thank you

this tricky question valuable pertains design pattern applicable in many instances. 1 of key aspects wanting know there new data not wanting show (yet) user. can assume when user want see data, don't want wait loaded client (just facebook). means client still needs cache data arrives, not display immediately.

therefore, don't want restrict data displayed in publication - because won't send data client. rather, want send (relevant) data client , cache there until ready.

the easiest way involves having timestamp in data work from. can couple reactive variable add new documents displayed set when reactive variable changes. (code in different files):

// within template want show data template.mytemplate.oncreated(function() {   var self = this;   var options = null; // define non-time options    // subscribe data loaded client   // include relevant options limit data exclude timestamps   self.subscribe("posts", options);    // create , initialise reactive variable current date   self.loadedtime = new reactivevar(new date());    // create reactive variable see when new data available   // create autorun whenever subscription changes ready() state   // ignore first run ready() should false   // subsequent false values indicate new data arriving   self.newdata = new reactivevar(false);   self.autorun(function(computation) {     if(!computation.firstrun) {       if(!self.subscriptionsready()) {         self.newdata.set(true);       }     }   }); });  // fetch relevant data subscribed (cached) within client // assume within template helper // use value (get()) of reactive variable template.mytemplate.helpers({   displayedposts = function() {     return posts.find({timestamp: {$lt: template.instance().loadedtime.get()}});   },    // second helper determine whether or not new data available   // can used in template notify user   newdata = function() {     return template.instance().newdata.get(); });  // update reactive variable current time // assume takes place within template helper // assume have button (or similar) "reload" class template.mytemplate.events({   'click .reload' = function(event, template) {     template.loadedtime.set(new date());   } }); 

i think simplest pattern cover of points raise. gets more complicated if don't have timestamp, have multiple subscriptions (then need use subscription handles) etc. hope helps!