流星onrender -访问DOM困难

Meteor onRendered - difficulty accessing DOM

本文关键字：DOM 困难 访问 onrender 流星      更新时间：2023-09-26

我在流星中的模板onrender块中访问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');
  });
});

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

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

确认，jquery包被添加到Meteor。

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

你不应该在你的onrender父模板中使用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');
});

跟进:我试图得到(自然)的宽度和高度onrender函数中的图像，但它返回0，表示虽然模板已经渲染，但图像还没有加载。如何我能等图片加载吗?

完成@juliancwirko的回答，现在你有一个单独的模板来定义你的图像列表项，你可以使用流星事件映射监听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);
  }
});
相关文章：