Meteor: Elements from CollectionA re-rendering when I insert to CollectionB

I'm attempting to fade-in new elements in a reactive {{#each}} of the comments posted by users.

I have a code sample at https://gist.github.com/3119147 of a very simple comments section (textarea and new comment insert code not included, but it's very boilerplate.). Included is a snippet of CSS where I give .comment.fresh { opacity: 0; }, and then in my script, I have:

Template.individual_comment.postedago_str = function() {
  var id = this._id;
  Meteor.defer(function() {
    $('#commentid_'+id+'.fresh').animate({'opacity':'1'}, function() {
      $(this).removeClass('fresh');
    });
  });
  return new Date(this.time).toString();
};

Which seems like a terrible place to execute an animation. My thinking is that each time a new comment is rendered, it will need to call all my Template.individual_comment.* functions, so that's why my animation defers from one of those. However, Meteor is calling Template.individual_comment.postedago_str() each time a different collection (Likes) is inserted to. This means I click the Like button, and my whole list of comments flashes white and fades back in (very annoying!).

I read the Meteor documentation and tried to figure out how to better slice up my templates so only chunks will update, and I added id="" attributes everywhere that seemed reasonable.. still this bug. Anyone know what's going on?

TIA!

Answers


As a workaround, you could wrap an {{if}} block around the fresh class on individual comments, that would check the comment's creation time and only add the fresh class in the first place if the comment is actually recent. Something like:

<div class="comment{{#if isActuallyFresh}} fresh{{/if}}" id="commentid_{{_id}}">

And then define the isActuallyFresh function:

Template.individual_comment.isActuallyFresh = function() {
  if ((new Date().getTime() - this.time) < 300000) // less than 5 minutes old
     return true;
  else
     return false;

Need Your Help

Insert info into an HTTP header

java rest http-headers

I’m trying to add some data to the http header that comes back from a RESTful web service call. Is it possible to use JAX-RS or something else to add data to the response header?