子模板后的Meteor OnRendered功能

Question

父模板的onRendered函數在子模板之前調用。 子模板渲染后如何執行父模板功能。

<template name="parent">
 {{#each object}}
  {{> child}}
 {{/each}}
</template>

<template name="child">
 <img src="someurl" data-src="someurl">
</template>

現在我需要執行一些文檔准備功能

Template.parent.onRendered(function() { // doesnt invokes after child template
 $("img").unveil();
 $(window).trigger("lookup");
});

Answer 1

您可能需要將autorun和afterFlush結合使用。 嘗試以下操作：

Template.parent.onRendered(function() {
  this.autorun(function() {
    // replace the find with whatever is in your helper
    // which returns the children array/cursor
    if (Children.find().count()) {
      // this should run after the child templates have been rerendered
      Tracker.afterFlush(function() {
        $('img').unveil();
        $(window).trigger('lookup');
      });
    }
  });
});

Answer 2

使用Tracker.afterFlush是產生所需行為的選項時，執行類似操作的最佳方法是僅使用子模板的onRendered函數。 呈現子模板后，將執行所需的代碼。

Template.child.onRendered(function() {
  this.$('img').unveil();
  this.$(window).trigger('lookup');
});

這種方法更加自然，並且允許子模板也可以在任何其他模板中使用，而不會“破壞”