meteor.js的模板onload事件

Gez*_*zim 22 javascript meteor

我知道meteor暴露了诸如"click"之类的事件,对于DOM元素,但我想知道是否有加载模板或部分时触发的加载事件?我怎么做到这一点?

谢谢.

Jos*_*cha 42

对于Meteor从0.4.0预览开始,您可以使用Template.myTemplate.created.

然而Template.myTemplate.created,DOM尚未准备就绪.

如果需要操作DOM,可能需要使用Template.myTemplate.rendered而不是使用布尔值来跟踪Template对象中的状态,如下所示:

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

  • 自从Meteor 1.0.4起,不推荐使用`Template.myTemplate.rendered`.虽然它仍然支持向后兼容性,但您可能希望对较新版本使用`Template.myTemplate.onRendered`.[来源](https://github.com/meteor/meteor/blob/devel/History.md#blaze-2) (3认同)

Nac*_*ket 11

以下应该工作.
一旦将模板添加到DOM并进行渲染,就会调用Meteor.defer.

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

Template.temp.invokeAfterLoad = function () {
  Meteor.defer(function () {
     $('mydiv').jquerify();
  });
  return "";
};
Run Code Online (Sandbox Code Playgroud)

  • 从v1.1.0.2开始,不推荐使用此模式.使用`Template.temp.helpers(...)`代替. (3认同)

Mik*_*ter 5

我建议您使用此方法,而不是接受的答案,总的恕我直言要少一些:

<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();
  });
};
Run Code Online (Sandbox Code Playgroud)

假设您要在模板加载后调用某些内容,因为它会对反应对象做出反应。

这样做的好处是您无需在模板中添加动画代码。