Javascript Meteor onRendered-难以访问DOM

从Meteor中的模板onRendered块访问DOM时遇到问题。以下是html模板的简化版本：

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

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

一般来说，如果有更好的替代方法，这里的目标是使用DOM中的信息调整图像大小

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

---

提前感谢您提供的任何帮助！这个看似简单的问题困扰了我好几个小时。

您不应该在您的onRendered父模板中使用jQuery

每个

。相反，您可以执行以下操作：

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

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

---

跟进：我正试图得到的（自然）宽度和高度 onRendered函数中的图像，但返回0，表示 模板渲染后，图像尚未加载。怎么 我可以等待图像加载吗

完成@juliancwirko answer，现在您有了一个单独的模板来定义图像列表项，您可以使用Meteor事件映射在

img

标记上收听加载事件

Template.imgTmpl.events({
  "load img": function(event, template){
    console.log("image width :",this.$("img").prop("width"));
    console.log("image height :",this.$("img").prop("height"));
  }
});

---

以下是对我有效的方法：

Template.imgTmpl.events({
  "load img": function(event){
    console.log("width " + event.currentTarget.naturalWidth);
    console.log("height " + event.currentTarget.naturalHeight);
  }
});

---

您的问题是，在执行

onRendered

处理程序时，由于

{{{each}}

块辅助程序尚未执行其反应式计算，因此图像尚未在DOM中呈现。查看我关于类似问题的详细答案：啊哈，谢谢你的详细解释！很好地解释了为什么juliancwirko的解决方案有效，而上面的代码无效。接下来：我试图在onRendered函数中获取图像的（自然）宽度和高度，但它返回0，这表示模板渲染后图像尚未加载。我如何才能等待图像加载？感谢您提供了非常快速和有用的答案！现在所需的信息是可访问的。出于好奇，为什么jQuery

each

在onRendered代码中不起作用？啊，saimeunt的回答回答了这里的问题啊哈，非常有趣，甚至没有想到使用事件！如果图像改变大小（例如在窗口调整大小事件中），会发生什么情况？我正在使用Boostrap，列宽可能会不时更改。如果要在调整大小时动态跟踪图像的大小，请设置一个调整大小处理程序

$（窗口）。在（“调整大小”，处理程序）

在父模板

onRendered

lifecycle事件中，使用标准jQuery迭代模板图像，观察它们的

clientWidth

和

clientHeight

属性（它们包含图像的实际屏幕大小，而不是基本位图大小）。好的，现在开始玩吧。非常感谢你的帮助！

Template.imgTmpl.events({
  "load img": function(event, template){
    console.log("image width :",this.$("img").prop("width"));
    console.log("image height :",this.$("img").prop("height"));
  }
});

Template.imgTmpl.events({
  "load img": function(event){
    console.log("width " + event.currentTarget.naturalWidth);
    console.log("height " + event.currentTarget.naturalHeight);
  }
});