javascript - Meteor Animation -

i trying implement animation item animates left after gets selected. following code works. 80% of time.

js

//myitem template.myitem.rendered = function(){   if(session.get("selected_item") === this.data._id){     $(this.firstnode).addclass("selected");   } else {     $(this.firstnode).removeclass("selected");   } };  template.myitem.events({   "click .myitem": function(evt, template){     session.set("selected_item", this._id);   } });   //myitemlist template.myitemlist.helpers({   items: function(){     return items.find();   } }); 

templates

<template name="myitem">   <div class="myitem">{{name}}</div> </template>  <template name="myitemlist">   {{#each items}}     {{> myitem}}   {{/each}} </template> 

css

.myitem { transition: 200ms 0ms ease-in; } .selected { left: -20px; } 

i tried wrap code meteor.defer() make sure ready animation.

template.myitem.rendered = function(){   meteor.defer(function() {     if(session.get("selected_item") === this.data._id){       $(this.firstnode).addclass("selected");     } else {       $(this.firstnode).removeclass("selected");     }   }); }; 

but results in kind of error:

exception defer callback: typeerror {} 

it great see ideas how make animation work every time.

update

krab got right answer. exception coming this reference. want add details. here 2 working versions on how animation:

with meteor.defer()

template.myitem.rendered = function(){   var instance = this;   if(session.get("selected_item") === this.data._id){     meteor.defer(function() {         $(instance.firstnode).addclass("selected"); //use "instance" instead of "this"     });   } }; 

(we don't need else block here because meteor remove selected class if redraws item.)

or $().animate()

template.myitem.rendered = function(){   if(session.get("selected_item") === this.data._id){     $(this.firstnode).animate({       left: "-20px"     }, 300);   } }; 

if use jquery approach need remove css code.

.myitem { transition: 200ms 0ms ease-in; } .selected { left: -20px; } 

try this, because this pointer in defer callback isn't same if code executed directly in rendered callback

template.myitem.rendered = function(){   var self = this;   meteor.defer(function() {     if(session.get("selected_item") === self.data._id){       $(self.firstnode).addclass("selected");     } else {       $(self.firstnode).removeclass("selected");     }   }); };