Meteor onRendered-難以訪問DOM

Question

我在從Meteor的Template onRendered塊中訪問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

你不應該使用jQuery each在你onRendered父模板。 相反，您可以執行以下操作：

<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

后續：我正在嘗試在onRendered函數中獲取圖像的（自然）寬度和高度，但是它返回0，表示雖然模板渲染了圖像，但尚未加載。 如何等待圖像加載？

完成@juliancwirko的回答后，既然您已有一個單獨的模板來定義圖像列表項，則可以使用流星事件映射來監聽img標簽上的load事件。

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

這對我有用：

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