jqueryjquery-uimeteorthemeroller

Themeroller jQuery script does not work with Meteor when inside #if currentUser


I have Meteor project and would like to use themes from Themeroller, especially the Tabs-widget to start with.

Everything works nicely until I add {{#if currentUser}} {{/if}} around the tabs div. Instead of getting tabs I get just normal list.

Moving {{#if currentUser}} after works, but I would like to hide Tabs completly if user is not logged in.

What is preventing tabs widget to work in this case?

This does not work: tabsTemplate.html

<template name="tabit">
{{#if currentUser}}
  <div id="tabs">
    <ul>
     <li><a href="#tabs-1">First</a></li>
     <li><a href="#tabs-2">Second</a></li>
     <li><a href="#tabs-3">Third</a></li>
   </ul>
  <div id="tabs-1">
    {{> selector}}
  </div>
  <div id="tabs-2">
    {{> counter}}
  </div>
  <div id="tabs-3">Nam dui erat</div>
 </div>
{{/if}}
</template>

tabsTemplate.js

if (Meteor.isClient) {
  $(function() {
   $( "#tabs" ).tabs();
  });
}

Solution

  • Do this:

    Template.tabit.rendered = function() {
        $(function() {
            $( "#tabs" ).tabs();
        });
    }
    

    This execute the code when the template is rendered and not when the meteor is loaded