Created
July 15, 2012 23:24
-
-
Save mturley/3119147 to your computer and use it in GitHub Desktop.
My quick and dirty DOM insertion animation attempt in Meteor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if (Meteor.is_client) { | |
// ... | |
var collections = { | |
Comments : new Meteor.Collection('comments'), | |
Likes : new Meteor.Collection('likes') | |
}; | |
// ... | |
Template.viewer_comments_stream.comments = function() { | |
return collections.Comments.find({}, {sort: {time: -1}}); | |
}; | |
// ... | |
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(); | |
}; | |
Template.interaction.events = { | |
'click #like button' : function() { | |
collections.Likes.insert({ | |
userId : null, // TODO if logged in, put something here | |
time : new Date().getTime(), | |
}); | |
} | |
}; | |
// ... | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.comment.fresh { | |
opacity: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- ... --> | |
<template name="interaction"> | |
<div id="interaction"> | |
<div id="like"> | |
<button></button> | |
</div> | |
<!-- A new-comment textarea and stuff here --> | |
</div> | |
</template> | |
<template name="viewer_comments_stream"> | |
<div id="comments"> | |
{{#each comments}} | |
{{> individual_comment}} | |
{{else}} | |
<div class="comment"> | |
No comments yet! | |
</div> | |
{{/each}} | |
</div> | |
</template> | |
<template name="individual_comment"> | |
<div class="comment fresh" id="commentid_{{_id}}"> | |
<div class="photo"></div> | |
<div class="content"> | |
<div class="header"> | |
<h1 class="user">{{name}}</h1> | |
{{#if source}} | |
via: <span class="source twitter"></span> | |
{{/if}} | |
<span class="time{{#unless source}} nosource{{/unless}}"> | |
<abbr class="timeago" title="{{postedago_iso}}">{{postedago_str}}</abbr> | |
</span> | |
</div> | |
<div class="text"> | |
{{message}} | |
</div> | |
</div> | |
</div> | |
</template> | |
<template name="viewer"> | |
{{> interaction}} | |
{{> viewer_comments_stream}} | |
</template> | |
<!-- ... --> | |
<!-- elsewhere I have a {{> viewer}} invocation --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
With the above implementation, the entire comments section re-renders itself completely when I do an insert in an unrelated collection (click the Like button).