meteor.js的模板onload事件

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.