CODEWITHSUNDEEP
javascripthtmlmeteorsemantic-ui
Carla
Carla

Reputation: 156

Semantic-UI components not initializing on Meteor

I'm trying to implement a simple tab.

The problem I am having is that while the tab functions fine in most cases, there are one or two cases where the tab initialization doesn't seem to work.

One such case is if the user logs in and out of the app. The user needs to be logged in to view the tab component, so for some reason the disappearance and reappearance of the tab is causing issues. The user can no longer change tabs.

As shown in the code below, I even tried putting the tab initialization code within a Tracker.autorun. The autorun is called as expected, but the tabs still don't work.

<!-- myTemplate.html -->
<template name="myTemplate">
  {{#if currentUser}}
  <div class="ui secondary pointing  menu">
    <a class="item active" data-tab="first">
      Tab1
    </a>
    <a class="item" data-tab="second">
      Tab2
    </a>
    <a class="item" data-tab="third">
      Tab3
    </a>
    </div>
    <div class="ui active tab segment" data-tab="first">
      1
    </div>
    <div class="ui tab segment" data-tab="second">
      2
    </div>
    <div class="ui tab segment" data-tab="third">
      3
    </div>
    {{/if}}
</template>

<!-- myTemplate.js -->
Template.myTemplate.onRendered(function(){
  Tracker.autorun(function () {
    console.log(Meteor.user());
    $('.menu .item')
       .tab({});
  });
})

Is there a better way to initialize the semantic-ui component than in the onRendered method?

Upvotes: 2

Views: 344

Answers (1)

Radosław Miernik
Radosław Miernik

Reputation: 4094

Your solution will reinitialize tabs on every change of Meteor.user(). Here's a better way:

<!-- myLayout.html -->
<template name="myTemplate">
  {{#if currentUser}}
    {{> myTemplate}}
    <!-- or -->
    {{> myTemplate user=currentUser}}
  {{/if}}
</template>

<!-- myTemplate.html -->
<template name="myTemplate">
  <div class="ui secondary pointing  menu">
    <a class="item active" data-tab="first">
      Tab1
    </a>
    <a class="item" data-tab="second">
      Tab2
    </a>
    <a class="item" data-tab="third">
      Tab3
    </a>
    </div>
    <div class="ui active tab segment" data-tab="first">
      1
    </div>
    <div class="ui tab segment" data-tab="second">
      2
    </div>
    <div class="ui tab segment" data-tab="third">
      3
    </div>
</template>

<!-- myTemplate.js -->
Template.myTemplate.onRendered(function(){
  // No check - user is present
  $('.menu .item').tab({});
})

Upvotes: 1

Related Questions