Компоненты Semantic-UI не инициализируются на Meteor

Question

Я пытаюсь реализовать простую вкладку.

Проблема, с которой я столкнулась, заключается в том, что, хотя вкладка прекрасно работает в большинстве случаев, есть один или два случая, когда инициализация вкладок не работает.

Один из таких случаев - если пользователь входит в систему и выходит из нее. Пользователь должен войти в систему, чтобы просмотреть компонент вкладки, поэтому по какой-то причине исчезновение и повторное появление вкладки вызывает проблемы. Пользователь больше не может изменять вкладки.

Как показано в приведенном ниже коде, я даже попытался поместить код инициализации вкладки в Tracker.autorun. autorun называется так, как ожидалось, но вкладки все еще не работают.

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

Есть ли лучший способ инициализировать компонент семантико-ще, чем в методе onRendered?

Answer 1

Ваше решение будет повторно инициализировать вкладки при каждом изменении Meteor.user(). Вот лучший способ:

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