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

【问题标题】：Passing arguments to helper functions for each Meteor template instance将参数传递给每个 Meteor 模板实例的辅助函数
【发布时间】：2018-05-12 16:52:39
【问题描述】：

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

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

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

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

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

感谢您的帮助！

【问题讨论】：

目前您正在通过 jquery 设置 qrcode 参数（大小和文本）。也可以通过html完成吗？例如。 <canvas id="qrcode" size=128 text="someurl"></canvas>另外，能否请您发布当前图像模板的助手？
使用#qrcode 作为选择器将一次选择所有您的画布。最好为每个画布使用唯一的 ID。 text 选项应该按照 qrdocde 文档和示例工作。
似乎二维码仅由传递给选项的文本生成，而不是作为参数设置的文本......如果我像上面那样做，那么所有二维码都解码为默认值“没有文字”

标签： javascript templates meteor qr-code meteor-blaze

【解决方案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
    });
});

【讨论】：

看起来二维码的文本实际上需要通过$().qrcode()中的选项传入；否则所有二维码都显示默认的“无文字”
除了onRendered() 函数之外，我也没有任何当前的辅助函数。

【解决方案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
    });
});

【讨论】：