Question

我正在创建一个流星页面，其中列出了一系列位于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码，用于编码存储桶上单个图像的URL。

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

理想情况下，我会将帮助器更改为：

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

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

感谢您的帮助！

Answer 1

<强>模板：

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

Answer 2

感谢blueren让我走上正轨！

诀窍是给每个画布一个唯一的id（所以我可以用jquery选择它），然后使用Template.instance().data来访问onRendered()函数中的变量。

<强>模板：

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

<强> OnRendered：

Template.image.onRendered(function() {
  var selector = "#" + Template.instance().data.sessionId;
  $(selector).qrcode({
    size: 128,
    radius: 0.0,
    text: Template.instance().data.publicUrl
    });
});

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

2 个答案: