javascript - Semantic-UI components not initializing on Meteor -
i'm trying implement simple tab.
the problem having while tab functions fine in cases, there 1 or 2 cases tab initialization doesn't seem work.
one such case if user logs in , out of app. user needs logged in view tab component, reason disappearance , reappearance of tab causing issues. user can no longer change tabs.
as shown in code below, tried putting tab initialization code within tracker.autorun. autorun called expected, 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 better way initialize semantic-ui component in onrendered method?
your solution reinitialize tabs on every change of meteor.user(). here's 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 present $('.menu .item').tab({}); }) 
Comments
Post a Comment