Meteor onRendered-难以访问DOM

Question

I'm having trouble accessing the DOM from within a Template onRendered block in Meteor. Here is a simplified version of the template html:

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

And here is the client JavaScript code:

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

I have verified that the code is running, as the 'check' appears in the browser console, but none of the 'hi's are printed despite several images displaying.

In case there is a better alternate way to go about this in general, the goal here is to resize images using information from the DOM.

To confirm, the jquery package is added to Meteor.

Thank you in advance for any help you can provide! I've been stumped for several hours on this deceptively simple issue.

Answer 1

You shouldn't use jQuery each in your onRendered parent template. Instead you can do something like:

<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');
});

Answer 2

Follow up: I'm trying to get the (natural) width and height of the image within the onRendered function, but it's returning 0, indicating that while the template has rendered the images aren't yet loaded. How can I wait for the images to load?

Completing @juliancwirko answer, now that you have a separate template for defining your images list items, you can listen to the load event on the img tag using Meteor event maps.

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

Answer 3

Here's what worked for me:

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