使用Flow-路由器时突出显示引导导航中的活动路由

Question

所以我找到了这个带引导带-3的导航条功能，但是现在我用的是流路由器而不是铁路由器。因此，我寻求将这个辅助函数转换为Flow-Router术语：

Template.navItems.helpers({
    activeIfTemplateIs: function (template) {
      var currentRoute = Router.current();
      return currentRoute &&
        template === currentRoute.lookupTemplate() ? 'active' : '';
    }
});

我已经尝试过解决这个问题(虽然我的站点/应用程序的许多部分仍然没有功能，所以没有对它进行测试)，但我需要以“是”或“否”的形式确认，并且可能需要更多关于我做错了什么的信息。

Template.navItems.helpers({
    activeIfTemplateIs: function (template) {
      var currentRoute = FlowRouter.current();
      return currentRoute &&
        template === currentRoute.name ? 'active' : '';
    }
});

我引导自己离开了Flow-路由器API。这个解决方案是正确的，还是因为某种原因被严格地与铁路由器一起使用？

Answer 1

在深入考虑了你的实际问题后，我意识到我正在用完全不同的方式在我的应用程序中这样做，也许你会发现这种模式很有用。我的应用程序也使用引导程序，并且有一个导航，我想在其中高亮显示活动路由(并取消高亮显示所有其他路由)。

在铁路由器里，我会：

onAfterAction(){
  const selector = '.nav a[href="/' + Router.current().route.getName() + '"]'; // the nav item for the active route (if any)
  $('.nav-active').removeClass('nav-active'); // unhighlight any previously highlighted nav
  $(selector).addClass('nav-active'); // highlight the current nav (if it exists, many routes don't have a nav)
}

在Flow-路由器中，onAfterAction被triggersExit所取代，因此您可以：

triggersExit(){
  const selector = '.nav a[href="' + FlowRouter.current().path + '"]';
  $('.nav-active').removeClass('nav-active');
  $(selector).addClass('nav-active');
}

我发现这比使用空格键模板要方便得多。

FYI，您有几个选项可以获得路线名称：

FlowRouter.getRouteName() // reactive

或

FlowRouter.current().route.name // NOT reactive

Answer 2

现在您可以使用活动路线包了。

例如：

<a class="nav-tab {{isActivePath class='nav-current' path='/new'}}" href="/new">
  New
</a>

Answer 3

为了给你一个更完整的图片，这是我的项目所做的。

模板HTML代码

<template name="topNavbar">
<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li><a class="navbar-brand" href="/">Sample</a></li>

    <li class="{{ activeIfTemplateIs 'home' }}">
      <a href="/home">Home</a>
    </li>

    <li class="{{ activeIfTemplateIs 'users' }}">
      <a href="/users">Users</a>
    </li>

  </ul>
</nav>
</template>

JavaScript码

Template.topNavbar.helpers({
  activeIfTemplateIs: function (template) {
    var currentRoute = FlowRouter.getRouteName();
    return currentRoute && template === currentRoute ? 'active' : '';
  }
});