javascript - Meteor onRendered - 访问 DOM 困难

Question

我在 Meteor 的 Template onRendered block 中访问 DOM 时遇到问题。这是模板 html 的简化版本:

<template name="templateName">
  {{#each thing}}
    <img src="{{filename}}">
  {{/each}}
</template>

这是客户端 JavaScript 代码:

Template.templateName.onRendered(function() {
  console.log('check');
  this.$('img').each( function() {
    console.log('hi');
  });
});

我已经验证代码正在运行，因为“检查”出现在浏览器控制台中，但尽管显示了多个图像，但没有打印“hi”。

如果有更好的替代方法来解决这个问题，这里的目标是使用 DOM 中的信息调整图像大小。

为了确认，jquery 包已添加到 Meteor 中。

预先感谢您提供的任何帮助!我已经被这个看似简单的问题难住了几个小时。

Answer 1

您不应在 onRendered 父模板中使用 jQuery each。相反，你可以这样做:

<template name="templateName">
    {{#each thing}}
        {{> imgTmpl}}
    {{/each}}
</template>

<template name="imgTmpl">
    <img src="{{filename}}">
</template>

js:

Template.templateName.onRendered(function() {
    console.log('check');
});

Template.imgTmpl.onRendered(function() {
    console.log('hi');
});