Passing arguments to helper functions for each Meteor template instance

Question

I'm creating a meteor page that lists a series of images sitting in a mongo database, as such:

<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:

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.

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 ?

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.

Thanks for your help!

Answer 1

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:

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

Answer 2

Thanks to blueren for putting me on the right track!

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.

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:

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