Assigning Template parameter gives null—how?!


#1

I have a very ordinary setup like so:

Template.availabilitySelector.onRendered(function(){
  this.myAvailabilities = new ReactiveArray();
  this.containerHeight = $('.subdaySelector').height();
  console.log(this.containerHeight);
  ...
});

myAvailabilities works as expected everywhere (whether via event parameter, or Template.instance(), etc). However, containerHeight is null in EVERY case! Even though I can do console.log(Template.instance()) and see containerHeight and its value in the console!! How is this possible? If I assign a number literal like this.containerHeight = 600 then everything works fine, so it seems like a jQuery thing, but… what am I missing?

Thanks in advance!


#2

Maybe this is a race-condition? When you try to access the the containerHeight it might not have been set yet.

Another trap people often fall into is expecting onRendered to have access to the DOM, which is not completely true when you include sub-templates.

Why don’t you add

 console.log( this.$('.subdaySelector') );

to see if the DOM element is even present in the availabilitySelector Template onRendered?


#3

Yeah, it’s definitely just the DOM not being completely ready. If I do a setTimeout for like 2 seconds, this and other things that didn’t work finally work. Arrrgh. Is there any way to detect when it’s really ready?


#4

Can you post the actual template? How does the .subdaySelector come to be?