Template onload event for meteor.js

Question

I know meteor exposes events such as "click", for DOM element but I'm wondering if there's a load event that's fired when a template or partial is loaded? How would I accomplish this?

Thanks.

Answer 1

For Meteor starting from 0.4.0 preview, you can use Template.myTemplate.created.

In Template.myTemplate.created the DOM is not ready however.

If you need to manipulate the DOM, you might want to use Template.myTemplate.rendered instead and use a boolean value to track the state within the Template object like this:

Template.myTemplate.rendered = function() {
    if(!this._rendered) {
      this._rendered = true;
      console.log('Template onLoad');
    }
}

Answer 2

Following should work.
Meteor.defer will get called once template is added to DOM and rendered.

<template name="temp">
    //regular stuff
    {{invokeAfterLoad}}
</template>

Template.temp.invokeAfterLoad = function () {
  Meteor.defer(function () {
     $('mydiv').jquerify();
  });
  return "";
};

Answer 3

I'd recommend this rather than the accepted answer, slightly less gross IMHO:

<template name="temp">
    {{aReactiveHelper}}
</template>

Template.temp.aReactiveHelper = function() {
  var someValue = Session.get('someValue');
  invokeAfterLoad();
  return someValue;
};

var invokeAfterLoad = function () {
  Meteor.defer(function () {
     $('mydiv').doSomething();
  });
};

The assumption is that you want to invoke something after the template loads because it's reacting to a reactive object.

The benefit here is you're not adding animation code to your template.