I’ve been working on one of the example todo apps, trying to learn me some stuff about animations with _uihooks (is that bad? It wasn’t in the documentation, but I saw some Gists and other places where people were using it).
Anyway, the problem I’m having has to do with the value of this in the Template.body.onRendered callback.
That works the same way with the body template, right, even though it’s not in part of an actual <template> element?
If it’s not that, then either I"m misunderstanding the API docs or have been staring at this code for way too long.
Everytime it runs, I get a TypeError that says the the .find() method on this (the Template.instance() inside the onRendered callback) is undefined.
Here’s the code I’m using. I cannot see what the problem with it is:
// Animations
Template.body.onRendered = function animateFadeOut() {
// Why is Chrome saying "this" is undefined?
console.dir(this);
// When a user clicks a task's .delete button,
// fade its opacity out before it is removed from the DOM
this.find('.animated')[0]._uihooks = {
removeElement: function(node) {
var animationFinished;
animationFinished = 'webkitTransitionEnd oTransitionEnd transitionEnd msTransitionEnd transitionend';
// Adding this class to the element causes the CSS3
// opacity animation (fade out) to begin
$(node).addClass('fadeOut');
// The callback registered here will listen for the
// animationFinished callbacks defined above (cross-
// browser events) and remove the element from the
// DOM when they're done.
$(node).on(animationFinished, function() {
return $(node).remove();
});
}
};
};
`
Thanks in advance to anyone who can point it out to me.