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

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 编码为我存储桶中的单个图像。

我的问题是：如何更改此模板和助手，以便为模板的 each 实例创建一个唯一的二维码来编码变量 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;

    }

});

渲染时：

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

Answer 2

感谢blueren让我走上正轨！

诀窍是给每个 canvas 一个唯一的 id（所以我可以 select 它与 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>

渲染时：

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

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

Passing arguments to helper functions for each Meteor template instance

javascript

templates

qr-code

meteor

meteor-blaze