[英]Passing arguments to helper functions for each Meteor template instance
I'm creating a meteor page that lists a series of images sitting in a mongo database, as such: 我正在创建一个流星页面,其中列出了位于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>
I also have a onRendered
helper function for the image template: 我还有一个用于图像模板的
onRendered
辅助函数:
Template.image.onRendered(function() {
$('#qrcode').qrcode({
size: 128,
text: "https://storage.googleapis.com/my-bucket/my-image-name.jpg"
});
});
And this works great, in that it renders a QR Code that encodes a URL to a single image on my storage bucket. 这非常有效,因为它呈现了一个QR码,该QR码将URL编码为我的存储桶中的单个图像。
My question is: how can I change this template and helper, so that for each instance of the template, I create a unique qr code that encodes the variable publicUrl
? 我的问题是:如何更改此模板和帮助程序,以便为模板的每个实例创建唯一的qr代码,以对变量
publicUrl
编码?
Ideally, I would change the helper to be: 理想情况下,我将助手更改为:
Template.image.onRendered(function(myUrl) {
$('#qrcode').qrcode({
size: 128,
text: myUrl
});
});
and then from the template I could pass the argument publicUrl
to it. 然后从模板中我可以将参数
publicUrl
传递给它。
Thanks for your help! 谢谢你的帮助!
Template: 模板:
...
...
...
<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>
...
...
...
Helper: 帮手:
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: OnRendered:
Template.image.onRendered(function(myUrl) {
$('#qrcode').qrcode({
size: 128
});
});
Thanks to blueren for putting me on the right track! 感谢blueren让我走上正轨!
The trick was to give each canvas a unique id (so I could select it with jquery), and then to use Template.instance().data
to access the variables in the onRendered()
function. 诀窍是给每个画布一个唯一的ID(以便我可以使用jquery选择它),然后使用
Template.instance().data
访问onRendered()
函数中的变量。
Template: 模板:
<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: OnRendered:
Template.image.onRendered(function() {
var selector = "#" + Template.instance().data.sessionId;
$(selector).qrcode({
size: 128,
radius: 0.0,
text: Template.instance().data.publicUrl
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.