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();
});
}
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