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

是否有更好的方法来初始化语义ui组件而不是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({});
})

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

1 个答案: