语义 UI 组件未在 Meteor 上初始化答案

【问题标题】：Semantic-UI components not initializing on Meteor语义 UI 组件未在 Meteor 上初始化
【发布时间】：2016-02-03 16:42:44
【问题描述】：

我正在尝试实现一个简单的选项卡。

我遇到的问题是，虽然在大多数情况下选项卡功能正常，但有一两种情况下选项卡初始化似乎不起作用。

这样的一种情况是用户登录和退出应用程序。用户需要登录才能查看选项卡组件，因此由于某种原因，选项卡的消失和重新出现导致了问题。用户无法再更改选项卡。

如下面的代码所示，我什至尝试将选项卡初始化代码放在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 方法更好的初始化semantic-ui 组件的方法？

【问题讨论】：

标签： javascript html meteor semantic-ui

【解决方案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({});
})

【讨论】：