javascript - 将参数传递给每个Meteor模板实例的辅助函数

我正在创建一个流星页面，其中列出了位于mongo数据库中的一系列图像，例如：

<div class="container">
  <header>
    <h3>List of Uploaded Images</h3>
  </header>
  <table align="center" style="width:100%">
    <tr>
    <th> Timestamp </th>
    <th> Public URL </th>
    <th> QR Code</th>
    <th> Session ID </th>
    <th> Filename </th>
    </tr>
      {{#each getImages}}
        {{> image}}
      {{/each}}
</table>
</div>

</body>

<template name="image">
  <tr>
    <td align="center"> {{ displayDate createdAt }} </td>
    <td align="center"> {{ publicUrl }} </td>
    <td align="center"><canvas id="qrcode"></canvas></td>
    <td align="center"> {{ sessionId }} </td>
    <td align="center"> {{ fileName }} </td>
  </tr>
</template>

我还为图像模板提供了一个onRendered辅助函数：

Template.image.onRendered(function() {
  $('#qrcode').qrcode({
    size: 128,
    text: "https://storage.googleapis.com/my-bucket/my-image-name.jpg"
  });
});

这非常有效，因为它呈现了一个QR码，该QR码将URL编码为我的存储桶中的单个图像。

我的问题是：如何更改此模板和帮助程序，以便为模板的每个实例创建一个唯一的qr代码来编码变量publicUrl？

理想情况下，我将助手更改为：

Template.image.onRendered(function(myUrl) {
  $('#qrcode').qrcode({
    size: 128,
    text: myUrl
  });
});

然后可以从模板中将参数publicUrl传递给它。

谢谢你的帮助！

最佳答案

模板：

...
...
...
<template name="image">
  <tr>
    <td align="center"> {{ displayDate createdAt }} </td>
    <td align="center"> {{ publicUrl }} </td>
    <td align="center"><canvas id="qrcode" text={{qrcodeUrl}}></canvas></td>
    <td align="center"> {{ sessionId }} </td>
    <td align="center"> {{ fileName }} </td>
  </tr>
</template>
...
...
...

帮手：

Template.image.helpers({

    qrCodeUrl: function(){
             // get the qr-code url from wherever you need to and have it returned. Need to see your current helper class in order to help put more code here.

    return qrCodeUrl;

    }

});

OnRendered：

Template.image.onRendered(function(myUrl) {
  $('#qrcode').qrcode({
    size: 128
    });
});