How to call a function on an element enclosed in an if statement in Meteor.js?

Question

Following example:

{{#if currentUser}}
    <li><a class="waves-effect waves-light btn modal-trigger modal-close" href="#upload">Upload Image</a></li>
{{/if}}

Now I am doing this:

Template.MasterLayout.onRendered(function()
{
    $('.modal-trigger').leanModal();
});

This works when you login and then refresh the page. Of course I want to have the function run in the moment the Button is shown. I am wondering, how I would do about "In the moment the upload image is rendered, run this function". Because I only know how to do this with Templates, but not with individual elements. Alternatively I could say "in the moment the user is logged in, run this function", but I feel like you should be able to have something like "elem.onRendered"?

Answer 1

There are several solutions, but the easiest is just to put it in a sub-template:

  ...
  {{#if currentUser}}
    {{> subTemplate}} 
  {{/if}}
  ...
</template>

<template name="subTemplate">
  <li><a class="waves-effect waves-light btn modal-trigger modal-close" href="#upload">Upload Image</a></li>
</template>

and then:

Template.subTemplate.onRendered(function() {
  $('.modal-trigger').leanModal();
});