Question

Can anybody tell me what i’m doing wrong ?

http://jsfiddle.net/zsVpt/

var loadingDOM = $('.loading');

//when i want to use the stored DOM, it simply doesn't work and don't give any errors at all !!!
Template.search.events({
    'keyup .searchField' : function(event, template){
        loadingDOM.css('display','inline');
        //etc.
     }
});


//this one works
Template.search.events({
    'keyup .searchField' : function(event, template){
        $('.loading').css('display','inline');
        //etc.
     }
});

It simple tho, get the dom and store it in a variable ( performance ) and then use it in the meteor events scope.

When i use use the stored DOM it simply doesn’t work without giving any errors ! while getting the DOM directly with JQuery does work.

http://www.youtube.com/watch?v=JP9zwE02tk4

Answer 1

Try caching loadingDOM in a rendered callback, like this:

Template.search.rendered = function() {
    this.loading = this.find('.loading'); 
}

Template.search.events({
  'keyup input' : function(e, t){
     $(t.loading).css('display', 'inline'); 
   }
});

My guess is that you’re trying to cache the loading dom element before the template has rendered. By caching it into the template object after the template has rendered, you’ll have access to it as long as you’re working within that same template.